AS新手總結：TabLayout與ViewPager聯動實作滑頁）
最近在學完安卓開發的UI部分，想利用現學知識練練手，于是做了個仿今日頭條
可以左右滑頁的界面，
基本思想：導航欄使用TabLayout作為頁面切換指示器，新聞欄目使用ViewPager
嵌套RecyclerView的方式實作左右滑頁功能，并將TabLayout和ViewPager聯動，
首先我們設計 activity_main.xml 布局檔案，代碼如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 實作標題和導航欄-->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/mine_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/menuImage"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:layout_marginLeft="5dp"
android:background="@drawable/menu"
android:layout_margin="5dp" />
<TextView
android:id="@+id/titleView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="My Top News"
android:textColor="#fff"
android:textStyle = "bold"
android:textSize="24sp"/>
</LinearLayout>
<!--- TabLayout控制元件使用 -->
<com.google.android.material.tabs.TabLayout
android:id="@+id/menuTab"
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:tabSelectedTextColor="#51F3E0"
app:tabIndicatorColor="#51F3E0"
app:tabMode="scrollable"
app:tabTextAppearance="@style/TabLayoutTextStyle" />
</LinearLayout>
<!-- 插入ViewPager控制元件-->
<androidx.viewpager.widget.ViewPager
android:id="@+id/my_viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
其中TabLayout用法可參考Tablayout使用全解，一篇就夠了
接下來， 我們需要為ViewPager設計一個RecyclerView的界面，就類似于我們寫ListView或者RecyclerView的時候，需要為他們設計一個item（子項）布局，代碼如下：
<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/recyclerView_1"
android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.recyclerview.widget.RecyclerView>
這里需要注意的是，我們這里的布局格式不再選擇LinearLayout， 而是直接使用androidx.recyclerview.widget.RecyclerView ，
接著，我們同樣需要為RecyclerView設計一個子項布局，代碼如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<!-- 使用View為每個新聞欄目添加邊框 -->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#FACECE"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- 左側用于顯示新聞的主圖 -->
<ImageView
android:id="@+id/news_image"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="3dp"
android:scaleType="centerCrop" />
<!-- 右側用于顯示新聞摘要 -->
<TextView
android:id="@+id/news_introduction"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:maxLines="2"
android:ellipsize="end"
android:textSize="20sp"
android:textColor="#000" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#FACECE"/>
</LinearLayout>
到這里，我們就完成了所有布局檔案的設計了，接下來我們需要來撰寫RecyclerView配接器和ViewPager配接器的代碼，
先撰寫RecyclerView配接器的代碼，首先我們需要創建一個新聞類，代碼如下：
package com.example.mytopnews20;
public class NewsDirection {
private String introduction; // 新聞梗概
private int imageId; // 新聞欄圖片
private String uriId; // 新聞的地址Id， 還沒實作呼叫權限，所以uriId暫時用不到
public NewsDirection(String introduction, int imageId, String uriId) {
this.introduction = introduction;
this.imageId = imageId;
this.uriId = uriId;
}
public String getIntroduction() {
return introduction;
}
public int getImageId() {
return imageId;
}
public String getUriId() {
return uriId;
}
}
然后我們為RecyclerView撰寫一個配接器，代碼如下：
package com.example.mytopnews20;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
/** 這里是RecyclerVieww配接器的標準寫法，也即必須重寫以下三個方法
* 這里我們自定義一個配接器繼承自RecyclerView.Adapter, 并且我們需要將泛型指定為NewsAdapter.ViewHolder
* 其中ViewHolder是NewsAdapter里面的一個內部類
*/
public class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder> {
private List<NewsDirection> newsDirections;
// 這里我們定義一個內部類ViewHolder，其作用是在RecyclerView滾動時設定值
static class ViewHolder extends RecyclerView.ViewHolder {
ImageView newsImage;
TextView newsIntroduction;
public ViewHolder(View view) {
super(view);
newsImage = view.findViewById(R.id.news_image);
newsIntroduction = view.findViewById(R.id.news_introduction);
}
}
// 建構式，用于傳入資料源
public NewsAdapter(List<NewsDirection> newsDirections) {
this.newsDirections = newsDirections;
}
// 以下三個函式一般都需要重寫
// 其中onCreateViewHolder方法用于創建ViewHolder實體， 在這個方法當中
// 我們需要把RecyclerView的子項布局加載進來，并回傳ViewHolder的實體
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).
inflate(R.layout.news_item, parent, false);
ViewHolder holder = new ViewHolder(view);
return holder;
}
// onBindViewHolder方法用于對RecyclerView子項的資料進行賦值， 會在每個子項
// 被滾動到螢屏內的時候執行，我們通過position引數獲得當前的NewsDirection實體
// 然后將資料設定到ViewHolder的newsImage和newsIntroduction中即可
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
NewsDirection newsDirection = newsDirections.get(position);
holder.newsImage.setImageResource(newsDirection.getImageId());
holder.newsIntroduction.setText(newsDirection.getIntroduction());
}
// getItemCount方法用于告訴RecyclerView一共有幾個子項，這里我們直接回傳資料源的長度
@Override
public int getItemCount() {
return newsDirections.size();
}
}
一般來說，RecyclerView的配接器撰寫都比較固定，這里總結一下：首先需要撰寫一個你需要展示的資訊的類，并創建一個鏈表作為資料源，接著我們需要撰寫NewsAdapter類，也即為我們的需要展示的資訊量身定做一個配接器，在類中，我們需要重寫三個方法，具體請看代碼注釋，
接著，我們開始編寫ViewPager的配接器，代碼如下：
package com.example.mytopnews20;
import android.view.View;
import android.view.ViewGroup;
import androidx.viewpager.widget.PagerAdapter;
import java.util.List;
public class ViewPagerAdapter extends PagerAdapter {
private List<View> viewList;
public ViewPagerAdapter(List<View> views) {
super();
this.viewList = views;
}
@Override
public int getCount() {
return viewList.size();
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewList.get(position));
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return (arg0 == arg1);
}
}
ViewPager配接器的撰寫方法和RecyclerView的撰寫方法類似，這里不再贅余，詳情可參考Android：ViewPager配接器PagerAdapter的使用
到此，可以說前期的準備已經全部完成了，接著就可以撰寫主函式了，注意：我們在主函式里面實作了TabLayout和ViewPager的聯動，代碼如下
package com.example.mytopnews20;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import com.google.android.material.tabs.TabLayout;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private List<List<NewsDirection>> listArray = new ArrayList<>(6); // 定義一個二維陣列，存放六個界面的新聞內容
private List<View> viewList = new ArrayList<>(); // 用于存放六個頁面的view
private TabLayout tabLayout; // 使用tabLayout設定導航欄， 實作帶有標志的導航效果
private ViewPager viewPager; // 使用ViewPager存放六個view， 實作左右滑動翻頁， 并和tabLayout聯動
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 將歡迎界面系統自帶的標題欄隱藏
ActionBar actionBar = getSupportActionBar();
if(actionBar != null) {
actionBar.hide();
}
initMenuTabs(); // 初始化導航欄tabLayout內容
initNewsInfo(); // 初始化新聞資訊
initViewPager(); // 初始化viewPager頁面資訊
BindTabAndPager(); // 系結tabLayout和viewPager，實作聯動
}
private void initMenuTabs() {
tabLayout = this.findViewById(R.id.menuTab);
// 使用addTab函式添加tab， 其中，使用newTab創建一個新的tab，使用setText設定文字，使用setIcon設定圖示
tabLayout.addTab(tabLayout.newTab().setText("Entertainment").setIcon(R.drawable.entertainment));
tabLayout.addTab(tabLayout.newTab().setText("Learning").setIcon(R.drawable.learning));
tabLayout.addTab(tabLayout.newTab().setText("SchoolNews").setIcon(R.drawable.school));
tabLayout.addTab(tabLayout.newTab().setText("Sports").setIcon(R.drawable.sports));
tabLayout.addTab(tabLayout.newTab().setText("Shopping").setIcon(R.drawable.shoping));
tabLayout.addTab(tabLayout.newTab().setText("Others").setIcon(R.drawable.others));
}
private void initNewsInfo() {
for (int i = 0; i < 6; i++) {
NewsDirection news = new NewsDirection("news" + i, R.drawable.newsphoto, null);
List<NewsDirection> list = new ArrayList<>();
list.add(news);
listArray.add(list);
}
}
private void initViewPager() {
/** LayoutInflater是一個用于決議xml的類，它的作用類似于findViewById，
*不同的是，LayoutInflater是用來找res/layout下的xml布局檔案，并且實體化，而findViewById是
* 查找xml布局檔案下的具體widget控制元件，如Button，TextView等，
* 1. 對于一個沒有載入或者想要動態載入的界面，都需要使用LayoutInflater.inflate()來載入
* 2. 對于一個已經載入的界面，就可以使用Activity.findViewById()方法來獲得其中的界面元素
*/
LayoutInflater inflater = getLayoutInflater(); // 實體化inflater
// 這里注意：對于不同的recyclerView需要使用不同的layoutManager， 因此定義一個LinearLayoutManager陣列
LinearLayoutManager layoutManagerArray[] = new LinearLayoutManager[6];
RecyclerView recyclerViewArray[] = new RecyclerView[6];
View viewArray[] = new View[6];
// NewsAdapter用于向recyclerView傳輸資訊
NewsAdapter[] adapterArray = new NewsAdapter[6];
// 這里實作每個recyclerView的初始化
for (int i = 0; i < 6; i++) {
layoutManagerArray[i] = new LinearLayoutManager(this);
viewArray[i] = inflater.inflate(R.layout.recyclerview, null);
recyclerViewArray[i] = viewArray[i].findViewById(R.id.recyclerView_1);
recyclerViewArray[i].setLayoutManager(layoutManagerArray[i]);
adapterArray[i] = new NewsAdapter(listArray.get(i));
recyclerViewArray[i].setAdapter(adapterArray[i]);
viewList.add(recyclerViewArray[i]);
}
// 將recyclerView嵌套到ViewPager里面
viewPager = this.findViewById(R.id.my_viewPager);
ViewPagerAdapter myAdapter = new ViewPagerAdapter(viewList);
viewPager.setAdapter(myAdapter);
}
private void BindTabAndPager() {
// 這個地方必須重新加載View，否則系統會找不到tabLayout和viewPager
tabLayout = this.findViewById(R.id.menuTab);
viewPager = this.findViewById(R.id.my_viewPager);
// Viewpager的監聽（這個接聽是為TabLayout專門設計的）
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
//TabLayout的監聽
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
// 被選中的時候
@Override
public void onTabSelected(TabLayout.Tab tab) {
int position = tab.getPosition();
viewPager.setCurrentItem(position);
}
// 沒有被選中的時候
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
// 重現被選中的時候
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
最后，我們看一下效果
以上為個人初學實踐總結，有很多不足之處，還請各位大佬不吝賜教，批評指正，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/181934.html
標籤：其他