ViewPage+Fragment + ListView可左右滑動翻頁（仿微信頁面）

最近因爲需求，要實現類似微信的界面（可左右滑動，可上下滑動）

新建項目（實現左右滑動的效果Activity + Fragment + PageView）

新建四個類繼承自Fragment作爲滑動界面時顯示的四個頁面

其中Home頁面對應main_tab_01.xml，代碼如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

<ListView
    android:id="@+id/Home_list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</ListView>

</LinearLayout>

類的代碼如下

package com.example.forever.day1_tab;


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;

/**
 * Created by forever on 2016/3/30.
 */
public class Home<span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">extends Fragment {</span>
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.main_tab_01,container,false);
    }
}

四個子界面類的代碼均相同

MainActivity以及其對應的activity_main.xml

activity_main.xml如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eee"
    android:orientation="vertical">
    <include layout="@layout/top_bar"></include>
    <android.support.v4.view.ViewPager
        android:id="@+id/v_Pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>
    <include layout="@layout/bottom_bar"></include>
</LinearLayout>

MainActivity如下

package com.example.forever.day1_tab;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.widget.ImageButton;
import android.widget.LinearLayout;

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

//public class MainActivity extends Title {
public class MainActivity extends TitleActivity{
    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mFragments = new ArrayList<Fragment>();
    private TitleActivity title_activity = new TitleActivity();
    /*
    底部的四個按鈕
     */
    private LinearLayout mTabBtnHome;
    private LinearLayout mTabBtnMsg;
    private LinearLayout mTabBtnFind;
    private LinearLayout mTabBtnMe;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);//加載佈局
        mViewPager = (ViewPager)findViewById(R.id.v_Pager);
        initView();
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }
            @Override
            public int getCount() {
                return mFragments.size();
            }
        };
        mViewPager.setAdapter(mAdapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            private int currentIndex;
            //滑動時修改按鈕的圖片
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                resetTabBtn();
                switch (position) {
                    case 0:
                        ((ImageButton) mTabBtnHome.findViewById(R.id.btn_Home)).setImageResource(R.drawable.tabbar_home_highlighted);
                        break;
                    case 1:
                        ((ImageButton) mTabBtnMsg.findViewById(R.id.btn_Msg)).setImageResource(R.drawable.tabbar_message_center_highlighted);
                        break;
                    case 2:
                        ((ImageButton) mTabBtnFind.findViewById(R.id.btn_Find)).setImageResource(R.drawable.tabbar_message_center_highlighted);
                        break;
                    case 3:
                        ((ImageButton) mTabBtnMe.findViewById(R.id.btn_Me)).setImageResource(R.drawable.tabbar_message_center_highlighted);
                        break;
                }
                currentIndex = position;
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
    protected  void  resetTabBtn(){
     //初始化按鈕的圖片
            ((ImageButton) mTabBtnHome.findViewById(R.id.btn_Home)).setImageResource(R.drawable.tabbar_home);
            ((ImageButton) mTabBtnMsg.findViewById(R.id.btn_Msg)).setImageResource(R.drawable.tabbar_message_center);
            ((ImageButton) mTabBtnFind.findViewById(R.id.btn_Find)).setImageResource(R.drawable.tabbar_discover);
            ((ImageButton) mTabBtnMe.findViewById(R.id.btn_Me)).setImageResource(R.drawable.tabbar_profile);

    }
    /*
     初始化
     */
    private void initView(){
        //初始化Layout方便尋找各佈局中的控件
        mTabBtnHome = (LinearLayout)findViewById(R.id.id_tab_bottom_Home);
        mTabBtnMsg = (LinearLayout)findViewById(R.id.id_tab_bottom_Msg);
        mTabBtnFind = (LinearLayout)findViewById(R.id.id_tab_bottom_Find);
        mTabBtnMe =(LinearLayout)findViewById(R.id.id_tab_bottom_Me);
        //初始化個界面，
        Home tab01 = new Home();
        Message tab02 = new Message();
        Find tab03 = new Find();
        Me tab04 = new Me();
        mFragments.add(tab01);
        mFragments.add(tab02);
        mFragments.add(tab03);
        mFragments.add(tab04);

    }
}

以上，已經實現了界面左右滑動的效果

Home界面加入ListView

新建listview子項目佈局文件news_item如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:id="@+id/author_title"
        android:layout_width="match_parent"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_height="50dp"
        android:orientation="horizontal">
        <ImageButton
            android:id="@+id/user_image"
            android:layout_width="40dp"
            android:layout_height="40dp"

            android:src="@drawable/compose_emotion_background_highlighted"
            />
        <Button
            android:id="@+id/author_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#0000"
            android:text=""/>
        <TextView
            android:id="@+id/msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="讚了  xxx  的文章"/>
    </LinearLayout>
        <LinearLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:orientation="vertical">
            <TextView
                android:id="@+id/news_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="22sp"
                android:textStyle="bold"
                android:text="基於移動平臺的信息整合系統發展現狀"/>
            <TextView
                android:id="@+id/news_content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="這段代碼也非常簡單，只是在 LinearLayout 中放入了一個 TextView 用於顯示新聞的標 題。仔細觀察 TextView，你會發現其中有幾個屬性是我們之前沒有學過的。android:padding 表示給控件的周圍加上補白，這樣不至於讓文本內容會緊靠在邊緣上"/>
        </LinearLayout>
</LinearLayout>

修改Home類。如下：

package com.example.forever.day1_tab;


import android.content.Context;
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.ListView;
import android.widget.SimpleAdapter;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * Created by forever on 2016/3/30.
 */
public class Home extends Fragment {
    private SimpleAdapter adapter;
    List<Map<String,Object>> simple = new ArrayList<Map<String,Object>>();
    private ListView  news_listview ;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.main_tab_01,container,false);
        initSimpleList();
        news_listview = (ListView)view.findViewById(R.id.Home_list);
        news_listview.setAdapter(adapter);
        return view;
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        /*
        實例化adapter
         */
        adapter = new SimpleAdapter(this.getContext(),simple,R.layout.news_item,new String[]{"author_name","user_image","news_title","news_content"},new int[]{R.id.author_name,R.id.user_image,R.id.news_title,R.id.news_content});
    }
    /*
    數據的初始化
     */
    public void initSimpleList(){
        int[] user_image={R.drawable.d_aini,R.drawable.d_aini,R.drawable.d_aini};
        String[] author_name = {"李四","張五","王麻子"};
        String[] news_title={"人能控制自己的長相嗎？","哪個瞬間讓你突然覺得讀書真有用？","人爲什麼活着呢？"};
        String[] news_content={"然後在 onCreateView()方法中加載了 news_title_frag佈局，並給新聞列表的ListView註冊了點擊事件。接下來在onActivityCreated() 方法中，我們通過是否能夠找到一個 id 爲 news_content_layout 的 View 來判斷當前是雙頁 模式還是單頁模式，這個 id 爲 news_content_layout 的 View 只在雙頁模式中才會出現，在 稍後的佈局裏你將會看到。",
                                "然後在 onCreateView()方法中加載了 news_title_frag佈局，並給新聞列表的ListView註冊了點擊事件。接下來在onActivityCreated() 方法中，我們通過是否能夠找到一個 id 爲 news_content_layout 的 View 來判斷當前是雙頁 模式還是單頁模式，這個 id 爲 news_content_layout 的 View 只在雙頁模式中才會出現，在 稍後的佈局裏你將會看到。",
                                "然後在 onCreateView()方法中加載了 news_title_frag佈局，並給新聞列表的ListView註冊了點擊事件。接下來在onActivityCreated() 方法中，我們通過是否能夠找到一個 id 爲 news_content_layout 的 View 來判斷當前是雙頁 模式還是單頁模式，這個 id 爲 news_content_layout 的 View 只在雙頁模式中才會出現，在 稍後的佈局裏你將會看到。"};
        Map<String,Object> map;
        simple.clear();
        for(int i = 0; i< 3 ;i++){
            map = new HashMap<String,Object>();
            map.put("user_image",user_image[i]);
            map.put("author_name",author_name[i]);
            map.put("news_title",news_title[i]);
            map.put("news_content",news_content[i]);
            simple.add(map);
        }

    }
}

至此，可左右滑動，可上下拉動的仿微信頁面已經完成

留下隻言片語，讓我知道有人在看哦^_^