【IMOOC学习笔记】多种多样的App主界面Tab实现方法(一)

1.ViewPager实现Tab

首先实现底部和底部布局

<?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="45dp"    android:background="@drawable/title_bar"    android:gravity="center"    android:orientation="vertical" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:text="微信"        android:textColor="#ffffff"        android:textSize="20sp"        android:textStyle="bold" /></LinearLayout>

底部布局

<?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="fill_parent"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical" >        <ImageButton            android:id="@+id/id_tab_weixin_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="#00000000"            android:clickable="false"            android:src="@drawable/tab_weixin_pressed" />        <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="fill_parent"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical" >        <ImageButton            android:id="@+id/id_tab_frd_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="#00000000"            android:clickable="false"            android:src="@drawable/tab_find_frd_normal" />        <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="fill_parent"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical" >        <ImageButton            android:id="@+id/id_tab_address_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="#00000000"            android:clickable="false"            android:src="@drawable/tab_address_normal" />        <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="fill_parent"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical" >        <ImageButton            android:id="@+id/id_tab_settings_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="#00000000"            android:clickable="false"            android:src="@drawable/tab_settings_normal" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="设置"            android:textColor="#ffffff" />    </LinearLayout></LinearLayout>

注意这里将LinearLayout中的子View ImageButton 的clickable设置为false,这样才能使得整个LiearLayout 响应点击事件

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

每一个tab页面，这里只列举一个，其他的都相似

<?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="fill_parent"        android:layout_height="fill_parent"        android:gravity="center"        android:text="This is Weixin Tab"        android:textSize="30sp"        android:textStyle="bold" /></LinearLayout>

MainActivity类

package com.imooc.tab01;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.view.Window;import android.widget.ImageButton;import android.widget.LinearLayout;public class MainActivity extends Activity implements OnClickListener {    private ViewPager mViewPager;    private PagerAdapter mAdapter;    private List<View> mViews = new ArrayList<View>(); 
    //用来保存view的数组    // TAB    private LinearLayout mTabWeixin;    private LinearLayout mTabFrd;    private LinearLayout mTabAddress;    private LinearLayout mTabSetting;    private ImageButton mWeixinImg;    private ImageButton mFrdImg;    private ImageButton mAddressImg;    private ImageButton mSettingImg;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_main);        initView();        initEvents();    }    private void initEvents() {        mTabWeixin.setOnClickListener(this);        mTabFrd.setOnClickListener(this);        mTabAddress.setOnClickListener(this);        mTabSetting.setOnClickListener(this);        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {            @Override            public void onPageSelected(int arg0) {                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:                    mSettingImg                            .setImageResource(R.drawable.tab_settings_pressed);                    break;                }            }            @Override            public void onPageScrolled(int arg0, float arg1, int arg2) {            }            @Override            public void onPageScrollStateChanged(int arg0) {            }        });    }    private void initView() {        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);        // tabs        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);        mTabSetting = (LinearLayout) findViewById(R.id.id_tab_settings);        // ImageButton        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);        mSettingImg = (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 void destroyItem(ViewGroup container, int position,                    Object object) {                container.removeView(mViews.get(position));            }            @Override            public Object instantiateItem(ViewGroup container, int position) {                View view = mViews.get(position);                container.addView(view);                return view;            }            @Override            public boolean isViewFromObject(View arg0, Object arg1) {                return arg0 == arg1;            }            @Override            public int getCount() {                return mViews.size();            }        };        mViewPager.setAdapter(mAdapter);    }    @Override    public void onClick(View v) {        resetImg();        switch (v.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);            mSettingImg.setImageResource(R.drawable.tab_settings_pressed);            break;        default:            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);        mSettingImg.setImageResource(R.drawable.tab_settings_normal);    }}

这样就实现了即可以滑动也可以点击tab实现页面的转换

下载：链接：http://pan.baidu.com/s/1c098WLU 密码：5zou

1.ViewPager实现Tab

更多相关文章

随机推荐