用ViewPager实现微信tab切换

来源：互联网发布：中国空军知乎编辑：程序博客网时间：2024/04/30 13:29

布局共三部分：top，bottom，中间。

top.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:background="@drawable/title_bar"    android:layout_width="match_parent"    android:layout_height="45dp"    android:orientation="vertical"    android:gravity="center_vertical">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="微信"        android:textColor="#ffffff"        android:textSize="20sp"        android:layout_gravity="center"        android:textStyle="bold"/></LinearLayout>

在TextView（组件）里，layout_gravity和gravity的区别：gravity指“微信”（组件里的东西）在本组件中的位置，layout_gravity指本组件在父类中的位置。
在LinearLayout（布局）里，gravity指组件在本布局中的位置。
我不是很熟悉的属性：对LinearLayout，background；对TextView，textColor（#ffffff白色，#000000黑色），textStyle。

bottom.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="55dp"    android:background="@drawable/bottom_bar"    android:orientation="horizontal">    <LinearLayout android:id="@+id/id_tab_weixin"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        android:orientation="vertical"        android:gravity="center">        <ImageButton android:id="@+id/id_tab_weixin_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/tab_weixin_pressed"            android:background="#00000000"            android:clickable="false"            />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="微信"            android:textColor="#ffffff"/>    </LinearLayout>    <LinearLayout android:id="@+id/id_tab_frd"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        android:orientation="vertical"        android:gravity="center">        <ImageButton android:id="@+id/id_tab_frd_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/tab_find_frd_normal"            android:background="#00000000"            android:clickable="false"            />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="朋友"            android:textColor="#ffffff"/>    </LinearLayout>    <LinearLayout android:id="@+id/id_tab_address"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        android:orientation="vertical"        android:gravity="center">        <ImageButton android:id="@+id/id_tab_address_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/tab_address_normal"            android:background="#00000000"            android:clickable="false"            />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="通讯录"            android:textColor="#ffffff"/>    </LinearLayout>    <LinearLayout android:id="@+id/id_tab_settings"        android:layout_width="0dp"        android:layout_height="match_parent"        android:layout_weight="1"        android:orientation="vertical"        android:gravity="center">        <ImageButton android:id="@+id/id_tab_settings_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/tab_settings_normal"            android:background="#00000000"            android:clickable="false"            />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="设置"            android:textColor="#ffffff"/>    </LinearLayout></LinearLayout>

一个横向的LinearLayout包括4个纵向的LinearLayout，每个纵向的LinearLayout有2个组件，ImageButton和TextView。
ImageButton的src和background的区别：src在表面，background在底下那层。当src的图片没有占满整个空间时，background就起作用了。#00000000，前两个0表示完全透明，所以其实后面6个0写成什么都行。因此，背景透明，就和LinearLayout的背景一样。
当需要几个组件平均占领一行时，就把对应的width或height写成0dp，weight写成1。

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:orientation="vertical">    <include layout="@layout/top"/>    <android.support.v4.view.ViewPager        android:id="@+id/id_viewpager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1">    </android.support.v4.view.ViewPager>    <include layout="@layout/bottom"/></LinearLayout>

include
ViewPager

tab01.xml（tab02.xml，tab03.xml，tab04.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:orientation="vertical">    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:text="This is Weixin Tab"        android:textSize="30sp"        android:textStyle="bold"        android:gravity="center"/></LinearLayout>

MainActivity.java

public class MainActivity extends Activity implements View.OnClickListener {    private ViewPager mViewPager;    private PagerAdapter mAdapter;    private List<View> mViews = new ArrayList<View>();    private LinearLayout mTabWeixin;    private LinearLayout mTabFrd;    private LinearLayout mTabAddress;    private LinearLayout mTabSettings;    private ImageButton mWeixinImg;    private ImageButton mFrdImg;    private ImageButton mAddressImg;    private ImageButton mSettingsImg;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);//不显示标题栏        setContentView(R.layout.activity_main);        initView();        initEvent();    }    private void initView() {        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);        mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings);        mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);        mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);        mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);        mSettingsImg = (ImageButton) findViewById(R.id.id_tab_settings_img);        LayoutInflater mInflater = LayoutInflater.from(this);        View tab01 = mInflater.inflate(R.layout.tab01, null);        View tab02 = mInflater.inflate(R.layout.tab02, null);        View tab03 = mInflater.inflate(R.layout.tab03, null);        View tab04 = mInflater.inflate(R.layout.tab04, null);        mViews.add(tab01);        mViews.add(tab02);        mViews.add(tab03);        mViews.add(tab04);        mAdapter = new PagerAdapter() {            @Override            public int getCount() {                return mViews.size();            }            @Override            public Object instantiateItem(ViewGroup container, int position) {                View view = mViews.get(position);                container.addView(view);                return view;            }            @Override            public void destroyItem(ViewGroup container, int position, Object object) {                container.removeView(mViews.get(position));            }            @Override            public boolean isViewFromObject(View view, Object object) {                return view == object;            }        };        mViewPager.setAdapter(mAdapter);    }    private void initEvent() {        mTabWeixin.setOnClickListener(this);        mTabFrd.setOnClickListener(this);        mTabAddress.setOnClickListener(this);        mTabSettings.setOnClickListener(this);        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                int currentItem = mViewPager.getCurrentItem();                resetImg();                switch (currentItem) {                    case 0:                        mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);                        break;                    case 1:                        mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);                        break;                    case 2:                        mAddressImg.setImageResource(R.drawable.tab_address_pressed);                        break;                    case 3:                        mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);                        break;                }            }            @Override            public void onPageSelected(int position) {            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    @Override    public void onClick(View view) {        resetImg();        switch (view.getId()) {            case R.id.id_tab_weixin:                mViewPager.setCurrentItem(0);                mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);                break;            case R.id.id_tab_frd:                mViewPager.setCurrentItem(1);                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);                break;            case R.id.id_tab_address:                mViewPager.setCurrentItem(2);                mAddressImg.setImageResource(R.drawable.tab_address_pressed);                break;            case R.id.id_tab_settings:                mViewPager.setCurrentItem(3);                mSettingsImg.setImageResource(R.drawable.tab_settings_pressed);                break;        }    }    private void resetImg() {        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);        mAddressImg.setImageResource(R.drawable.tab_address_normal);        mSettingsImg.setImageResource(R.drawable.tab_settings_normal);    }}

ViewPager的初始化
一层一层封装。把数组（元素为View类型）装到PagerAdapter适配器中，把适配器装到ViewPager里。
两个功能
1.点击下面的四个图标，图标点亮，页面切换。
四个LinearLayout监听事件。（注：多个监听事件可以用implement接口View.OnClickListener，在class里重写。）
2.左右滑动页面，同时图标点亮。
设置页面改变监听事件（ViewPager）。

最后，还有一个bug，就是点四个ImageButton没反应。改正方法为在ImageButton里增加属性clickable设为false。

本文参考慕课网android课程–多种多样的App主界面Tab实现方法

0 0