第一次學app就上手

---

先看效果 (未滑動)

滑動後 (標題欄 與 底部 與 FloatingActionButton 會以動畫方式隱藏)  

​

※ 如何實作?

1. Gradle中加入

allprojects {
    repositories {
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

dependencies {
   compile 'com.github.githubwing:ByeBurger:1.2.3'
  compile 'com.android.support:design:25.0.0'
  }

2. activity_main.xml中加入

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="頂部"
        app:layout_behavior="@string/bye_burger_title_behavior" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:layout_behavior="@string/bye_burger_bottom_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="底部" />

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="30dp"
        android:layout_marginRight="30dp"
        app:backgroundTint="@color/colorPrimary"
        app:layout_behavior="@string/bye_burger_float_behavior" />

</android.support.design.widget.CoordinatorLayout>

其中最重要的是
1) 必需實作在 CoordinatorLayout 內
2) 有一個 RecyclerView，這個 RecyclerView 滑動時 將觸發 隱藏/顯示 動畫
3) 在你想要滑動時向上隱藏的view加上 app:layout_behavior="@string/bye_burger_title_behavior"
4) 在你想要滑動時向下隱藏的view加上 app:layout_behavior="@string/bye_burger_bottom_behavior"
5) FloatingActionButton 內加上 app:layout_behavior="@string/bye_burger_float_behavior"

以上，就完成了！
對，就是這麼簡單！
 

---

以下附上快速實作範例程式碼以供參考​

● MainActivity.java

package com.example.ystar.buyburger;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        List<String> stringList = new ArrayList<>();
        for (int i = 0; i < 100; i++) {
            stringList.add(Integer.toString(i));
        }

        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(new MyAdapter(stringList));
    }

    public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
        private List<String> mData;

        public class ViewHolder extends RecyclerView.ViewHolder {
            public TextView mTextView;

            public ViewHolder(View v) {
                super(v);
                mTextView = (TextView) v.findViewById(R.id.info_text);
            }
        }

        public MyAdapter(List<String> data) {
            mData = data;
        }

        @Override
        public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
            ViewHolder vh = new ViewHolder(v);
            return vh;
        }

        @Override
        public void onBindViewHolder(ViewHolder holder, final int position) {
            holder.mTextView.setText(mData.get(position));
        }

        @Override
        public int getItemCount() {
            return mData.size();
        }
    }
}

 

● item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">

    <TextView
        android:id="@+id/info_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true" />
</RelativeLayout>

 

 

資料來源
https://github.com/githubwing/ByeBurger