Tab实现之ViewPager（一）

来源：互联网发布：windows配置hadoop 编辑：程序博客网时间：2024/06/09 14:45

在top.xml文件中（用于布局主页面的顶部）

在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="wrap_content"
    android:background="#0d0d0d"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:src="@mipmap/ic_launcher"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_friend"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/id_tab_friend_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:src="@drawable/android32"/>

        <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:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:src="@drawable/android32"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
            android:textColor="#ffffff"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_setting"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/id_tab_setting_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:src="@drawable/android32"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#ffffff"/>
    </LinearLayout>

</LinearLayout>

在activity_main.xml文件中

<?xml version="1.0"encoding="utf-8"?>
<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:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/id_viewpager">

    </android.support.v4.view.ViewPager>
    //布局底部的四个Tab
    <include layout="@layout/bottom"/>
</LinearLayout>

以下是四个滑动页面的布局

在tab01.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="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:textSize="40dp"
        android:text="这是微信TAB"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="点击"
        android:id="@+id/tab01_button"/>
</LinearLayout>

在tab02.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:gravity="center"
        android:textSize="40dp"
        android:text="这是朋友TAB"/>
</LinearLayout>

在tab03.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:gravity="center"
        android:textSize="40dp"
        android:text="这是通讯录TAB"/>
</LinearLayout>

在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:gravity="center"
        android:textSize="40dp"
        android:text="这是设置TAB"/>
</LinearLayout>

在MainActivity.class文件中

package com.example.yuxue.learntab_viewpager;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

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

public class MainActivityextendsAppCompatActivityimplementsView.OnClickListener {
    // TAB
    privateLinearLayouttab_weixin;
    private LinearLayouttab_friend;
    private LinearLayouttab_address;
    private LinearLayouttab_setting;
    //    IMG
    privateImageViewtab_weixin_img;
    private ImageView tab_friend_img;
    private ImageView tab_address_img;
    private ImageView tab_setting_img;
    //   ViewPager
    privateViewPagerviewPager;

    private PagerAdapterpagerAdapter;
    private List<View> viewList = newArrayList<View>();

    @Override
    protected voidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView(); // 所有的控件初始化
        initEvents();//初始化事件
    }

    private void initView() {
        // Tab
        tab_weixin= (LinearLayout) findViewById(R.id.id_tab_weixin);
        tab_friend = (LinearLayout) findViewById(R.id.id_tab_friend);
        tab_address = (LinearLayout) findViewById(R.id.id_tab_address);
        tab_setting = (LinearLayout) findViewById(R.id.id_tab_setting);
        // IMG
        tab_weixin_img= (ImageView) findViewById(R.id.id_tab_weixin_img);
        tab_friend_img = (ImageView) findViewById(R.id.id_tab_friend_img);
        tab_address_img = (ImageView) findViewById(R.id.id_tab_address_img);
        tab_setting_img = (ImageView) findViewById(R.id.id_tab_setting_img);
        // ViewPager
        viewPager= (ViewPager) findViewById(R.id.id_viewpager);
        // 将布局转换为 View
        LayoutInflater inflater = LayoutInflater.from(this);
        View tab01 = inflater.inflate(R.layout.tab01,null);
        View tab02 = inflater.inflate(R.layout.tab02,null);
        View tab03 = inflater.inflate(R.layout.tab03,null);
        View tab04 = inflater.inflate(R.layout.tab04,null);
        // 将 View添加到集合中
        viewList.add(tab01);
        viewList.add(tab02);
        viewList.add(tab03);
        viewList.add(tab04);

        pagerAdapter =newPagerAdapter() {
            @Override
            //返回View的个数
            public intgetCount() {
                return viewList.size();
            }

            @Override
            public booleanisViewFromObject(View view, Object object) {
                return view == object;
            }

            @Override
            //初始化View
            publicObject instantiateItem(ViewGroup container,intposition) {
                View view = viewList.get(position);
                container.addView(view);
                return view;
            }

            @Override
            //摧毁View
            public voiddestroyItem(ViewGroup container,intposition, Object object) {
                container.removeView(viewList.get(position));
            }
        };
        viewPager.setAdapter(pagerAdapter);
    }

    private void initEvents() {
        tab_weixin.setOnClickListener(this);
        tab_friend.setOnClickListener(this);
        tab_address.setOnClickListener(this);
        tab_setting.setOnClickListener(this);
        viewPager.setOnPageChangeListener(newViewPager.OnPageChangeListener() {
            @Override
            public voidonPageScrolled(intposition,float positionOffset,intpositionOffsetPixels) {

            }

            @Override
            public voidonPageSelected(intposition) {
                //滑动到当前页面时调用，改变一些相关属性
                set_Img();
                int currentItem =viewPager.getCurrentItem();
                switch (currentItem) {
                    case 0:
                        tab_weixin_img.setImageResource(R.mipmap.ic_launcher);

                        break;
                    case 1:
                        tab_friend_img.setImageResource(R.mipmap.ic_launcher);
                        break;
                    case 2:
                        tab_address_img.setImageResource(R.mipmap.ic_launcher);
                        break;
                    case 3:
                        tab_setting_img.setImageResource(R.mipmap.ic_launcher);
                        break;
                }
            }

            @Override
            public voidonPageScrollStateChanged(intstate) {

            }
        });
        viewList.get(0).findViewById(R.id.tab01_button).setOnClickListener(newView.OnClickListener() {
            @Override
            public voidonClick(View v) {
                Log.e("qwe",">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>");
                Toast.makeText(getApplicationContext(), "1234567890", Toast.LENGTH_SHORT).show();
            }
        });

    }

    @Override
    public voidonClick(View v) {
        set_Img();// 先将所有的图片设置为暗色
        switch(v.getId()) {
            // TAB 的点击事件
            caseR.id.id_tab_weixin:
                // 切换到第一个界面
                viewPager.setCurrentItem(0);
                //将相应图片设置为亮色
                tab_weixin_img.setImageResource(R.mipmap.ic_launcher);
                break;
            case R.id.id_tab_friend:
                viewPager.setCurrentItem(1);
                tab_friend_img.setImageResource(R.mipmap.ic_launcher);
                break;
            case R.id.id_tab_address:
                viewPager.setCurrentItem(2);
                tab_address_img.setImageResource(R.mipmap.ic_launcher);
                break;
            case R.id.id_tab_setting:
                viewPager.setCurrentItem(3);
                tab_setting_img.setImageResource(R.mipmap.ic_launcher);
                break;

        }
    }
    private void set_Img() {
        // 将所有的图片设置为暗色
        tab_weixin_img.setImageResource(R.drawable.android32);
        tab_friend_img.setImageResource(R.drawable.android32);
        tab_address_img.setImageResource(R.drawable.android32);
        tab_setting_img.setImageResource(R.drawable.android32);
    }
}

为了布局的好看，应该将主题设置为NoActionBar

0 0