ViewPager+FragmentPagerAdapter实现微信5.2.1主界面架构

最新推荐文章于 2021-05-01 16:36:17 发布

小小劲

最新推荐文章于 2021-05-01 16:36:17 发布

阅读量3.2k

点赞数 10

分类专栏： AndroidUI介面

本文链接：https://blog.csdn.net/liguojin1230/article/details/45568185

版权

AndroidUI介面专栏收录该内容

20 篇文章 0 订阅

订阅专栏

人的一生，没有一味的苦，没有永远的痛；没有迈不过的坎，没有闯不过的关。

本讲内容：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;
			}
		}
	}

}

Take your time and enjoy it