快捷導(dǎo)航

詳解Android中fragment和viewpager的那點事兒

更新時間：2016年12月25日 10:14:32 作者：潘侯爺

本文主要對Android中fragment和viewpager進行詳細介紹，具有一定的參考價值，需要的朋友一起來看下吧

在之前的博文《Android 中使用 ViewPager實現(xiàn)屏幕頁面切換和頁面輪播效果》和《詳解Android中Fragment的兩種創(chuàng)建方式》以及《Android中fragment與activity之間的交互（兩種實現(xiàn)方式）》中我們介紹了ViewPager以及Fragment各自的使用場景以及不同的實現(xiàn)方式。

那如果將他們兩結(jié)合起來，會不會擦出點火花呢，答案是肯定的。之前在介紹ViewPager時，我們實現(xiàn)了多個ImageView的切換，并配合更新導(dǎo)航原點的狀態(tài)。那我們現(xiàn)在就將之前的imageview替換為fragment，將導(dǎo)航原點替換為更加生動的布局，比如我們經(jīng)常使用的微信（取消了ActionBar）：

（1）我們可以通過點擊下面的導(dǎo)航按鈕選擇對應(yīng)的顯示界面（fragment），如下圖：

（2）我們也可以通過滑動界面（fragment）來實現(xiàn)界面切換，同時下面的導(dǎo)航按鈕狀態(tài)也會發(fā)生變化，如下圖：

那么重點來了，這樣的效果要怎么實現(xiàn)呢，大至分為以下的步驟

（1）布局文件中直接部署ViewPager以及下方的導(dǎo)航布局

（2）根據(jù)導(dǎo)航的個數(shù)來建立對應(yīng)的fragment布局并建立配套的Fragment類（為方便后期擴展，建議建立與導(dǎo)航個數(shù)相同的fragments）

（3）drable下使用selector實現(xiàn)導(dǎo)航組件的形態(tài)變化

（4）通過FragmentPagerAdapter（V4包下）實現(xiàn)ViewPager與Fragment的關(guān)聯(lián)

（5）設(shè)置下方導(dǎo)航的點擊事件以及ViewPager的OnPageChangeListener方法實現(xiàn)對應(yīng)的狀態(tài)改變

第一步：layout中的主布局文件activity_main.xml文件

取消了actionBar，采用LinearLayout嵌套來實現(xiàn)主布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/activity_main"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" tools:context="com.example.administrator.viewpagerfragment.MainActivity">
 <LinearLayout
 android:background="@color/colorblack"
 android:padding="10dp"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 <TextView
 android:layout_width="0dp"
 android:layout_weight="1"
 android:gravity="center_vertical"
 android:layout_height="match_parent"
 android:layout_marginLeft="5dp"
 android:text="潘侯爺微信"
 android:textSize="20sp"
 android:textColor="@color/colorWhite"/>
 <ImageView
android:src="@mipmap/jy_drltsz_btn_addperson"
 android:adjustViewBounds="true"
 android:maxHeight="23dp"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />
 </LinearLayout>
 <android.support.v4.view.ViewPager
 android:id="@+id/viewPager"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1"/>
 <View
 android:layout_width="match_parent"
 android:layout_height="1dp"
 android:background="@color/colornormal"/>
 <LinearLayout
 android:orientation="horizontal"
 android:padding="5dp"
 android:layout_width="match_parent"
 android:layout_height="wrap_content">
 <LinearLayout
 android:id="@+id/weixin"
 android:clickable="true"
 android:orientation="vertical"
 android:layout_width="0dp"
 android:gravity="center"
 android:layout_weight="1"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/weixin_img"
android:background="@drawable/weixin_picture_selector"
 android:layout_width="30dp"
 android:layout_height="25dp" />
 <TextView
 android:id="@+id/weixin_txt"
 android:layout_width="wrap_content"
 android:gravity="center"
 android:layout_height="wrap_content"
 android:text="微信"
 android:textSize="12sp"
android:textColor="@drawable/weixin_text_selector"/>
 </LinearLayout>
 <LinearLayout
 android:id="@+id/contact"
 android:clickable="true"
 android:orientation="vertical"
 android:layout_width="0dp"
 android:gravity="center"
 android:layout_weight="1"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/contact_img"
android:background="@drawable/txl_picture_selector"
 android:layout_width="30dp"
 android:layout_height="25dp" />
 <TextView
 android:id="@+id/contact_txt"
 android:layout_width="wrap_content"
 android:gravity="center"
 android:layout_height="wrap_content"
 android:text="通訊錄"
 android:textSize="12sp"
android:textColor="@drawable/weixin_text_selector"/>
 </LinearLayout>
 <LinearLayout
 android:id="@+id/find"
 android:clickable="true"
 android:orientation="vertical"
 android:layout_width="0dp"
 android:gravity="center"
 android:layout_weight="1"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/find_img"
android:background="@drawable/find_picture_selector"
 android:layout_width="30dp"
 android:layout_height="25dp" />
 <TextView
 android:id="@+id/find_txt"
 android:layout_width="wrap_content"
 android:gravity="center"
 android:layout_height="wrap_content"
 android:text="發(fā)現(xiàn)"
 android:textSize="12sp" android:textColor="@drawable/weixin_text_selector"/>
 </LinearLayout>
 <LinearLayout
 android:id="@+id/self"
 android:clickable="true"
 android:orientation="vertical"
 android:layout_width="0dp"
 android:gravity="center"
 android:layout_weight="1"
 android:layout_height="wrap_content">
 <ImageView
 android:id="@+id/self_img"
android:background="@drawable/me_picture_selector"
 android:layout_width="30dp"
 android:layout_height="25dp" />
 <TextView
 android:id="@+id/self_txt"
 android:layout_width="wrap_content"
 android:gravity="center"
 android:layout_height="wrap_content"
 android:text="我"
 android:textSize="12sp"
android:textColor="@drawable/weixin_text_selector"/>
 </LinearLayout>
 </LinearLayout>
</LinearLayout>

第二步：layout中fragment的布局文件（可自由擴展）

這里四個導(dǎo)航對應(yīng)四個不同的fragment（實現(xiàn)上面的效果，也可以只建立一個fragment，但這樣不利于后期擴展），這里我們只演示其中一個weixin_fragment.xml（其他三個為 contactListFragment; findFragment;selfFragment）

<?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">
 <TextView
 android:id="@+id/tv"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:text="沒有微信消息"
 android:gravity="center"
 android:textSize="50sp"/>
</LinearLayout>

第三步：drable中設(shè)定下方導(dǎo)航組件不同的形態(tài)

導(dǎo)航組件中文字形態(tài)變化只是顏色不同，圖片的話需要設(shè)置點擊前后不同的圖片（這里演示一種）

（1）文字的變化wenxin_text_selector.xml

這里使用selected而不用checked的原因：個人使用的導(dǎo)航布局為linerlayout，并且為linerlayout設(shè)置chiclable而不是其中的Text/imageView，所以為了判斷變化，這里使用了selected，方便代碼中設(shè)置調(diào)用。

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:color="@color/colorpressed" android:state_selected="true"/>
 <item android:color="@color/colornormal" android:state_selected="false" />
 </selector>

（2）圖片的變化weixin_picture_selector.xml

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/weixin_pressed" android:state_selected="true"/>
 <item android:drawable="@mipmap/weixin_normal" android:state_selected="false" />
 </selector>

第四步：Java中對應(yīng)fragment布局的Fragment繼承類

這里建議繼承android.support.v4.app.Fragment包下的.Fragment，因為后面要用的FragmentPagerAdapter屬于V4包，應(yīng)該統(tǒng)一。

4個fragment對應(yīng)4個java類，這里演示一個，其他三個都一樣。

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
/**
 * Created by panchengjia on 2016/12/24.
 */
public class WeixinFragment extends Fragment {
 @Nullable
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
 View view = inflater.inflate(R.layout.weixin_fragment,container,false);
 return view;
 }
}

第五步：java中功能實現(xiàn)MainActivity.java文件

代碼中詳細標注了各個實現(xiàn)步驟的注釋，這里不再贅述（為了提高程序運行效率，很多重復(fù)方法未封裝，代碼看起來有點臃腫了）

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
 //聲明存儲fragment的集合
 private ArrayList<Fragment> fragments;
 //聲明四個導(dǎo)航對應(yīng)fragment
 WeixinFragment weixinFragment;
 ContactListFragment contactListFragment;
 FindFragment findFragment;
 SelfFragment selfFragment;
 //聲明ViewPager
 private ViewPager viewPager;
 FragmentManager fragmentManager;//聲明fragment管理
 //聲明導(dǎo)航欄中對應(yīng)的布局
 private LinearLayout weixin, contact, find, self;
 //聲明導(dǎo)航欄中包含的imageview和textview
 private ImageView weixin_img, contact_img, find_img, self_img;
 private TextView weixin_txt, contact_txt, find_txt, self_txt;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 //初始化加載首頁布局
 initView();
 //調(diào)用自定義initListener方法，為各個組件添加監(jiān)聽事件
 initListener();
 //設(shè)置默認選擇的pager和導(dǎo)航欄的狀態(tài)
 viewPager.setCurrentItem(0);
 weixin_img.setSelected(true);
 weixin_txt.setSelected(true);
 }
 private void initListener() {
 //為四大導(dǎo)航組件添加監(jiān)聽
 weixin.setOnClickListener(this);
 contact.setOnClickListener(this);
 find.setOnClickListener(this);
 self.setOnClickListener(this);
 //為viewpager添加頁面變化的監(jiān)聽以及事件處理
 viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
 @Override
 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 }
 @Override
 public void onPageSelected(int position) {
 //根據(jù)位置直接決定顯示哪個fragment
 viewPager.setCurrentItem(position);
 switch (position) {
  case 0:
  weixin_img.setSelected(true);
  weixin_txt.setSelected(true);
  contact_img.setSelected(false);
  contact_txt.setSelected(false);
  find_img.setSelected(false);
  find_txt.setSelected(false);
  self_img.setSelected(false);
  self_txt.setSelected(false);
  break;
  case 1:
  weixin_img.setSelected(false);
  weixin_txt.setSelected(false);
  contact_img.setSelected(true);
  contact_txt.setSelected(true);
  find_img.setSelected(false);
  find_txt.setSelected(false);
  self_img.setSelected(false);
  self_txt.setSelected(false);
  break;
  case 2:
  weixin_img.setSelected(false);
  weixin_txt.setSelected(false);
  contact_img.setSelected(false);
  contact_txt.setSelected(false);
  find_img.setSelected(true);
  find_txt.setSelected(true);
  self_img.setSelected(false);
  self_txt.setSelected(false);
  break;
  case 3:
  weixin_img.setSelected(false);
  weixin_txt.setSelected(false);
  contact_img.setSelected(false);
  contact_txt.setSelected(false);
  find_img.setSelected(false);
  find_txt.setSelected(false);
  self_img.setSelected(true);
  self_txt.setSelected(true);
  break;
 }
 }
 @Override
 public void onPageScrollStateChanged(int state) {
 }
 });
 }
 private void initView() {
 //在主布局中根據(jù)id找到ViewPager
 viewPager = (ViewPager) findViewById(R.id.viewPager);
 //實例化所屬四個fragment
 weixinFragment = new WeixinFragment();
 contactListFragment = new ContactListFragment();
 findFragment = new FindFragment();
 selfFragment = new SelfFragment();
 fragments = new ArrayList<>();
 //添加fragments到集合中
 fragments.add(weixinFragment);
 fragments.add(contactListFragment);
 fragments.add(findFragment);
 fragments.add(selfFragment);
 fragmentManager = getSupportFragmentManager();
 //為ViewPager設(shè)置適配器用于部署fragments
 viewPager.setAdapter(new MyFragmentPagerAdapter(fragmentManager));
 weixin = (LinearLayout) findViewById(R.id.weixin);
 contact = (LinearLayout) findViewById(R.id.contact);
 find = (LinearLayout) findViewById(R.id.find);
 self = (LinearLayout) findViewById(R.id.self);
 weixin_img = (ImageView) findViewById(R.id.weixin_img);
 contact_img = (ImageView) findViewById(R.id.contact_img);
 find_img = (ImageView) findViewById(R.id.find_img);
 self_img = (ImageView) findViewById(R.id.self_img);
 weixin_txt = (TextView) findViewById(R.id.weixin_txt);
 contact_txt = (TextView) findViewById(R.id.contact_txt);
 find_txt = (TextView) findViewById(R.id.find_txt);
 self_txt = (TextView) findViewById(R.id.self_txt);
 }
 /**
 * 設(shè)置導(dǎo)航欄的點擊事件并同步更新對應(yīng)的ViewPager
 * 點擊事件其實就是更改導(dǎo)航布局中對應(yīng)的Text/ImageView
 * 的選中狀態(tài)，配合drable中的selector更改圖片以及文字變化
 *
 * @param v
 */
 @Override
 public void onClick(View v) {
 switch (v.getId()) {
 case R.id.weixin:
 viewPager.setCurrentItem(0);
 weixin_img.setSelected(true);
 weixin_txt.setSelected(true);
 contact_img.setSelected(false);
 contact_txt.setSelected(false);
 find_img.setSelected(false);
 find_txt.setSelected(false);
 self_img.setSelected(false);
 self_txt.setSelected(false);
 break;
 case R.id.contact:
 viewPager.setCurrentItem(1);
 weixin_img.setSelected(false);
 weixin_txt.setSelected(false);
 contact_img.setSelected(true);
 contact_txt.setSelected(true);
 find_img.setSelected(false);
 find_txt.setSelected(false);
 self_img.setSelected(false);
 self_txt.setSelected(false);
 break;
 case R.id.find:
 viewPager.setCurrentItem(2);
 weixin_img.setSelected(false);
 weixin_txt.setSelected(false);
 contact_img.setSelected(false);
 contact_txt.setSelected(false);
 find_img.setSelected(true);
 find_txt.setSelected(true);
 self_img.setSelected(false);
 self_txt.setSelected(false);
 break;
 case R.id.self:
 viewPager.setCurrentItem(3);
 weixin_img.setSelected(false);
 weixin_txt.setSelected(false);
 contact_img.setSelected(false);
 contact_txt.setSelected(false);
 find_img.setSelected(false);
 find_txt.setSelected(false);
 self_img.setSelected(true);
 self_txt.setSelected(true);
 break;
 }
 }
 //創(chuàng)建FragmentPagerAdapter
 class MyFragmentPagerAdapter extends FragmentPagerAdapter {
 public MyFragmentPagerAdapter(FragmentManager fm) {
 super(fm);
 }
 @Override
 public android.support.v4.app.Fragment getItem(int position) {
 return fragments.get(position);
 }
 @Override
 public int getCount() {
 return fragments.size();
 }
 }
}

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: