ViewPager+FragmentPagerAdapter實現微信5.2.1主界面架構

jopen 9年前發布 | 353K 次閱讀 Android開發移動開發 FragmentPagerAdapter

本講內容：ViewPager+FragmentPagerAdapter實現主界面架構（可以點擊和滑動）

示例一：

下面是res/layout/top1.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="wrap_content"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/top1"
        android:padding="10dp" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:gravity="center"
            android:orientation="horizontal" >

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/actionbar_icon" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:text="微信"
                android:textColor="@color/lightgray"
                android:textSize="18sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:gravity="center"
            android:orientation="horizontal" >

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginRight="20dp"
                android:src="@drawable/actionbar_search_icon" />

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginRight="20dp"
                android:src="@drawable/actionbar_add_icon" />

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/actionbar_more_icon" />
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>

下面是res/layout/top2.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="wrap_content"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/id_tab1_chat"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/guide_round"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dp" >

            <TextView
                android:id="@+id/id_chat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="聊天"
                android:textColor="@color/green"
                android:textSize="15dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/id_tab2_found"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/guide_round"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dp" >

            <TextView
                android:id="@+id/id_found"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="發現"
                android:textColor="@color/black"
                android:textSize="15dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/id_tab3_contact"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/guide_round"
            android:gravity="center"
            android:orientation="horizontal"
            android:padding="10dp" >

            <TextView
                android:id="@+id/id_contact"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="通訊錄"
                android:textColor="@color/black"
                android:textSize="15dp" />
        </LinearLayout>
    </LinearLayout>

    <ImageView 
        android:id="@+id/id_tab_line"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/tabline"/>

</LinearLayout>

下面是res/layout/main_layout.xml 布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eee"
    android:orientation="vertical">

        <include layout="@layout/top1"/>
    <include layout="@layout/top2"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

</LinearLayout>

下面是res/layout/chat_tab_01.xml 布局文件：(3個標簽頁基本一致，不重復貼了。)

<?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" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="this is first tab"
        android:textColor="#000000"
        android:textSize="30sp" />

</LinearLayout>

下面是res/drawable/guide_round.xml 文件

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

</selector>

下面是res/values/colors.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="white">#FFFFFF</color><!--白色 -->

    <color name="ivory">#FFFFF0</color><!--象牙色 -->

    <color name="lightyellow">#FFFFE0</color><!--亮黃色 -->

    <color name="yellow">#FFFF00</color><!--黃色 -->

    <color name="snow">#FFFAFA</color><!--雪白色 -->

    <color name="floralwhite">#FFFAF0</color><!--花白色 -->

    <color name="lemonchiffon">#FFFACD</color><!--檸檬綢色 -->

    <color name="cornsilk">#FFF8DC</color><!--米綢色 -->

    <color name="seashell">#FFF5EE</color><!--海貝色 -->

    <color name="lavenderblush">#FFF0F5</color><!--淡紫紅 -->

    <color name="papayawhip">#FFEFD5</color><!--番木色 -->

    <color name="blanchedalmond">#FFEBCD</color><!--白杏色 -->

    <color name="mistyrose">#FFE4E1</color><!--淺玫瑰色 -->

    <color name="text_color">#717171</color><!--淺玫瑰色 -->

    <color name="bisque">#FFE4C4</color><!--桔黃色 -->

    <color name="moccasin">#FFE4B5</color><!--鹿皮色 -->
    <color name="navajowhite">#FFDEAD</color><!--納瓦白 -->

    <color name="peachpuff">#FFDAB9</color><!--桃色 -->

    <color name="gold">#FFD700</color><!--金色 -->

    <color name="pink">#FFC0CB</color><!--粉紅色 -->

    <color name="lightpink">#FFB6C1</color><!--亮粉紅色 -->

    <color name="orange">#FFA500</color><!--橙色 -->

    <color name="lightsalmon">#FFA07A</color><!--亮肉色 -->

    <color name="darkorange">#FF8C00</color><!--暗桔黃色 -->

    <color name="coral">#FF7F50</color><!--珊瑚色 -->

    <color name="hotpink">#FF69B4</color><!--熱粉紅色 -->

    <color name="tomato">#FF6347</color><!--西紅柿色 -->

    <color name="orangered">#FF4500</color><!--紅橙色 -->

    <color name="deeppink">#FF1493</color><!--深粉紅色 -->

    <color name="fuchsia">#FF00FF</color><!--紫紅色 -->

    <color name="magenta">#FF00FF</color><!--紅紫色 -->

    <color name="red">#FF0000</color><!--紅色 -->

    <color name="oldlace">#FDF5E6</color><!--老花色 -->

    <color name="lightgoldenrodyellow">#FAFAD2</color><!--亮金黃色 -->

    <color name="linen">#FAF0E6</color><!--亞麻色 -->

    <color name="antiquewhite">#FAEBD7</color><!--古董白 -->

    <color name="salmon">#FA8072</color><!--鮮肉色 -->

    <color name="ghostwhite">#F8F8FF</color><!--幽靈白 -->
    <color name="mintcream">#F5FFFA</color><!--薄荷色 -->

    <color name="whitesmoke">#F5F5F5</color><!--煙白色 -->

    <color name="beige">#F5F5DC</color><!--米色 -->

    <color name="wheat">#F5DEB3</color><!--淺黃色 -->

    <color name="sandybrown">#F4A460</color><!--沙褐色 -->

    <color name="azure">#F0FFFF</color><!--天藍色 -->

    <color name="honeydew">#F0FFF0</color><!--蜜色 -->

    <color name="aliceblue">#F0F8FF</color><!--艾利斯蘭 -->

    <color name="khaki">#F0E68C</color><!--黃褐色 -->

    <color name="lightcoral">#F08080</color><!--亮珊瑚色 -->

    <color name="palegoldenrod">#EEE8AA</color><!--蒼麒麟色 -->

    <color name="violet">#EE82EE</color><!--紫羅蘭色 -->

    <color name="darksalmon">#E9967A</color><!--暗肉色 -->

    <color name="lavender">#E6E6FA</color><!--淡紫色 -->

    <color name="lightcyan">#E0FFFF</color><!--亮青色 -->

    <color name="burlywood">#DEB887</color><!--實木色 -->

    <color name="plum">#DDA0DD</color><!--洋李色 -->

    <color name="gainsboro">#DCDCDC</color><!--淡灰色 -->

    <color name="crimson">#DC143C</color><!--暗深紅色 -->

    <color name="palevioletred">#DB7093</color><!--蒼紫羅蘭色-->

    <color name="goldenrod">#DAA520</color><!--金麒麟色 -->
    <color name="orchid">#DA70D6</color><!--淡紫色 -->

    <color name="thistle">#D8BFD8</color><!--薊色 -->

    <color name="lightgray">#D3D3D3</color><!--亮灰色 -->

    <color name="lightgrey">#D3D3D3</color><!--亮灰色 -->

    <color name="tan">#D2B48C</color><!--茶色 -->

    <color name="chocolate">#D2691E</color><!--巧可力色 -->

    <color name="peru">#CD853F</color><!--秘魯色 -->

    <color name="indianred">#CD5C5C</color><!--印第安紅 -->

    <color name="mediumvioletred">#C71585</color><!--中紫羅蘭色 -->

    <color name="silver">#C0C0C0</color><!--銀色 -->

    <color name="darkkhaki">#BDB76B</color><!-- 暗黃褐色 -->
    <color name="rosybrown">#BC8F8F</color><!--褐玫瑰紅-->

    <color name="mediumorchid">#BA55D3</color><!--中粉紫色 -->

    <color name="darkgoldenrod">#B8860B</color><!--暗金黃色 -->

    <color name="firebrick">#B22222</color><!--火磚色 -->

    <color name="powderblue">#B0E0E6</color><!--粉藍色 -->

    <color name="lightsteelblue">#B0C4DE</color><!--亮鋼蘭色 -->

    <color name="paleturquoise">#AFEEEE</color><!--蒼寶石綠 -->

    <color name="greenyellow">#ADFF2F</color><!--黃綠色 -->

    <color name="lightblue">#ADD8E6</color><!--亮藍色 -->

    <color name="darkgray">#A9A9A9</color><!--暗灰色 -->
    <color name="darkgrey">#A9A9A9</color><!--暗灰色 -->

    <color name="brown">#A52A2A</color><!--褐色 -->

    <color name="sienna">#A0522D</color><!--赭色 -->

    <color name="darkorchid">#9932CC</color><!--暗紫色 -->

    <color name="palegreen">#98FB98</color><!--蒼綠色 -->

    <color name="darkviolet">#9400D3</color><!--暗紫羅蘭色 -->

    <color name="mediumpurple">#9370DB</color><!--中紫色 -->

    <color name="lightgreen">#90EE90</color><!--亮綠色 -->

    <color name="darkseagreen">#8FBC8F</color><!--暗海蘭色 -->

    <color name="saddlebrown">#8B4513</color><!--重褐色 -->

    <color name="darkmagenta">#8B008B</color><!--暗洋紅 -->

    <color name="darkred">#8B0000</color><!--暗紅色 -->

    <color name="blueviolet">#8A2BE2</color><!-- 紫羅蘭藍色-->
    <color name="lightskyblue">#87CEFA</color><!--亮天藍色-->

    <color name="skyblue">#87CEEB</color><!--天藍色 -->

    <color name="gray">#808080</color><!--灰色 -->

    <color name="grey">#808080</color><!--灰色 -->

    <color name="olive">#808000</color><!--橄欖色 -->

    <color name="purple">#800080</color><!--紫色 -->

    <color name="maroon">#800000</color><!--粟色 -->

    <color name="aquamarine">#7FFFD4</color><!--碧綠色 -->

    <color name="chartreuse">#7FFF00</color><!--黃綠色 -->
    <color name="lawngreen">#7CFC00</color><!--草綠色 -->

    <color name="mediumslateblue">#7B68EE</color><!--中暗藍色 -->

    <color name="lightslategray">#778899</color><!--亮藍灰 -->

    <color name="lightslategrey">#778899</color><!--亮藍灰 -->

    <color name="slategray">#708090</color><!--灰石色 -->

    <color name="slategrey">#708090</color><!--灰石色 -->

    <color name="olivedrab">#6B8E23</color><!--深綠褐色 -->

    <color name="slateblue">#6A5ACD</color><!--石藍色 -->

    <color name="dimgray">#696969</color><!--暗灰色 -->

    <color name="dimgrey">#696969</color><!--暗灰色 -->

    <color name="mediumaquamarine">#66CDAA</color><!--中綠色-->

    <color name="cornflowerblue">#6495ED</color><!--菊蘭色 -->

    <color name="cadetblue">#5F9EA0</color><!--軍蘭色 -->

    <color name="darkolivegreen">#556B2F</color><!-- 暗橄欖綠 -->
    <color name="indigo">#4B0082</color><!--靛青色 -->

    <color name="mediumturquoise">#48D1CC</color><!--中綠寶石-->

    <color name="darkslateblue">#483D8B</color><!--暗灰藍色 -->

    <color name="steelblue">#4682B4</color><!--鋼蘭色 -->

    <color name="royalblue">#4169E1</color><!--皇家藍 -->

    <color name="turquoise">#40E0D0</color><!--青綠色 -->

    <color name="mediumseagreen">#3CB371</color><!--中海藍 -->
    <color name="limegreen">#32CD32</color><!--橙綠色 -->

    <color name="darkslategray">#2F4F4F</color><!--暗瓦灰色 -->

    <color name="darkslategrey">#2F4F4F</color><!--暗瓦灰色 -->

    <color name="seagreen">#2E8B57</color><!--海綠色 -->

    <color name="forestgreen">#228B22</color><!--森林綠 -->

    <color name="lightseagreen">#20B2AA</color><!--亮海藍色 -->

    <color name="dodgerblue">#1E90FF</color><!--閃蘭色 -->

    <color name="midnightblue">#191970</color><!--中灰蘭色 -->

    <color name="aqua">#00FFFF</color><!--淺綠色 -->

    <color name="cyan">#00FFFF</color><!--青色 -->

    <color name="springgreen">#00FF7F</color><!--春綠色 -->

    <color name="lime">#00FF00</color><!--酸橙色 -->

    <color name="mediumspringgreen">#00FA9A</color><!--中春綠色 -->

    <color name="darkturquoise">#00CED1</color><!--暗寶石綠 -->

    <color name="deepskyblue">#00BFFF</color><!--深天藍色 -->

    <color name="darkcyan">#008B8B</color><!--暗青色 -->

    <color name="teal">#008080</color><!--水鴨色 -->

    <color name="green">#008000</color><!--綠色 -->

    <color name="darkgreen">#006400</color><!--暗綠色 -->

    <color name="blue">#0000FF</color><!--藍色 -->

    <color name="mediumblue">#0000CD</color><!--中蘭色 -->

    <color name="darkblue">#00008B</color><!--暗藍色 -->

    <color name="navy">#000080</color><!--海軍色 -->

    <color name="black">#000000</color><!--黑色 -->
</resources>

下面是ChatMainTab01.java界面文件：(3個Fragment.jaca基本一致，不重復貼了。)

注意全部導入import android.support.v4.app.Fragment;而非import android.app.Fragment;以兼容底版本

public class ChatMainTab01 extends Fragment{
    public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.chat_tab_01, container, false);
        return view;
    }
}

下面是FragmentAdapter.java界面文件：

/**
 * 功能：主頁引導欄的三個Fragment頁面設置適配器
 */
public class FragmentAdapter extends FragmentPagerAdapter{
    private List<Fragment> fragments;

    public FragmentAdapter(FragmentManager fm,List<Fragment> fragments) {
        super(fm);
        this.fragments=fragments;
    }

    public Fragment getItem(int fragment) {
        return fragments.get(fragment);
    }

    public int getCount() {
        return fragments.size();
    }

}

下面是MainActivity.java主界面文件：

public class MainActivity extends FragmentActivity {
    /**
     * 頂部三個LinearLayout
     */
    private LinearLayout mTabChat;
    private LinearLayout mTabFound;
    private LinearLayout mTabContact;

    /**
     * 頂部的三個TextView
     */
    private TextView chat;
    private TextView found;
    private TextView contact;

    /**
     * Tab的那個引導線
     */
    private ImageView mTabLine;
    /**
     * 屏幕的寬度
     */
    private int screenWidth;

    private ViewPager mViewPager;
    private FragmentAdapter mAdapter;
    private List<Fragment> fragments = new ArrayList<Fragment>();

    private Resources res;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        res=getResources();

        initView();

        mViewPager=(ViewPager) findViewById(R.id.id_viewpager);

        /**
         * 初始化Adapter
         */
        mAdapter=new FragmentAdapter(getSupportFragmentManager(), fragments);

        mViewPager.setAdapter(mAdapter);
        mViewPager.setOnPageChangeListener(new TabOnPageChangeListener());

        initTabLine();
    }

    /**
     * 根據屏幕的寬度，初始化引導線的寬度
     */
    private void initTabLine() {
        mTabLine=(ImageView) findViewById(R.id.id_tab_line);

        //獲取屏幕的寬度
        DisplayMetrics outMetrics=new DisplayMetrics();
        getWindow().getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
        screenWidth=outMetrics.widthPixels;

        //獲取控件的LayoutParams參數(注意：一定要用父控件的LayoutParams寫LinearLayout.LayoutParams)
        LinearLayout.LayoutParams lp=(android.widget.LinearLayout.LayoutParams) mTabLine.getLayoutParams();
        lp.width=screenWidth/3;//設置該控件的layoutParams參數
        mTabLine.setLayoutParams(lp);//將修改好的layoutParams設置為該控件的layoutParams
    }

    /**
     * 初始化控件，初始化Fragment
     */
    private void initView() {
        chat=(TextView) findViewById(R.id.id_chat);
        found=(TextView) findViewById(R.id.id_found);
        contact=(TextView) findViewById(R.id.id_contact);

        chat.setOnClickListener(new TabOnClickListener(0));
        found.setOnClickListener(new TabOnClickListener(1));
        contact.setOnClickListener(new TabOnClickListener(2));

        fragments.add(new ChatMainTab01());
        fragments.add(new FoundMainTab02());
        fragments.add(new ContactMainTab03());

        mTabChat=(LinearLayout) findViewById(R.id.id_tab1_chat);
        mTabFound=(LinearLayout) findViewById(R.id.id_tab2_found);
        mTabContact=(LinearLayout) findViewById(R.id.id_tab3_contact);
    }

    /**
     * 重置顏色
     */
    private void resetTextView() {
        chat.setTextColor(res.getColor(R.color.black));
        found.setTextColor(res.getColor(R.color.black));
        contact.setTextColor(res.getColor(R.color.black));
    }

    /**
     * 功能：點擊主頁TAB事件
     */
    public class TabOnClickListener implements View.OnClickListener{
        private int index=0;

        public TabOnClickListener(int i){
            index=i;
        }

        public void onClick(View v) {
            mViewPager.setCurrentItem(index);//選擇某一頁
        }

    }

    /**
     * 功能：Fragment頁面改變事件
     */
    public class TabOnPageChangeListener implements OnPageChangeListener{

        //當滑動狀態改變時調用 
        public void onPageScrollStateChanged(int state) {

        }

        //當前頁面被滑動時調用 
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels){
            LinearLayout.LayoutParams lp=(android.widget.LinearLayout.LayoutParams) mTabLine.getLayoutParams();
            //返回組件距離左側組件的距離
            lp.leftMargin= (int) ((positionOffset+position)*screenWidth/3);
            mTabLine.setLayoutParams(lp);
        }

        //當新的頁面被選中時調用
        public void onPageSelected(int position) {
            //重置所有TextView的字體顏色
            resetTextView();
            switch (position) {
            case 0:
                chat.setTextColor(res.getColor(R.color.green));
                break;
            case 1:
                found.setTextColor(res.getColor(R.color.green));
                break;
            case 2:
                contact.setTextColor(res.getColor(R.color.green));
                break;
            }
        }
    }

}

來自：http://blog.csdn.net/liguojin1230/article/details/45568185

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1431174803882.html

Android開發移動開發 FragmentPagerAdapter

ViewPager+FragmentPagerAdapter實現微信5.2.1主界面架構

相關經驗

相關資訊

相關文檔

目錄