多种多样APP主界面Tab实现

最新推荐文章于 2023-11-25 23:31:04 发布
最新推荐文章于 2023-11-25 23:31:04 发布
阅读量1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xin917480852/article/details/51287825
版权

由于APP的空间比较小，为了显示更多的内容以及更好的排版APP的内容形式，我们需要向用户展示大量的数据以及动画功能，这个时候我们就需要使用到Tab实现滑动显示更多的内容

接下来我们主要讲解4种实现方法

实现的效果


Viewpager实现

基本界面：顶部一个微信标题 中部一个Viewpager实现活动显示页面 底部一个可选择活动的四个按钮
实现方法
顶部布局：top.xml 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:gravity="center"
    android:background="@drawable/bottom_bar"
    android:layout_height="45dp">

    <!--   注释的快捷键是Ctrl+Shift+/ -->
    <!--  layout_gravity是控件在父布局中的位置 -->
    <!--   gravity是控件中的内容在控件中的位置-->
    <TextView
       android:layout_gravity="center"
       android:gravity="left|center"
        android:text="@string/weixin"
        android:textColor="#ffffff"
        android:layout_width="match_parent"
        android:textStyle="bold"
        android:layout_height="match_parent" />


</LinearLayout>
底部布局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="60dp"
    android:background="#ffffffff"

    android:orientation="horizontal" >

    <LinearLayout
        android:clickable="true"
        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="#000000" />
    </LinearLayout>

    <LinearLayout
        android:clickable="true"
        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="#000000" />
    </LinearLayout>

    <LinearLayout
        android:clickable="true"
        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="#000000" />
    </LinearLayout>

    <LinearLayout
        android:clickable="true"
        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="#000000"/>
    </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"
    tools:context="com.example.tab.MainActivity">

    <include layout="@layout/top"></include>

    <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"></include>
</LinearLayout>

设配器 
package com.example.viewpager.Adapter;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.viewpager.R;

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

/**
 * Created by 小新 on 2016/5/1.
 */
public class ViewpagerAndPagerAdapter extends PagerAdapter {
    private List<View> mViews = new ArrayList<View>();
    Context context;
    public ViewpagerAndPagerAdapter( Context context){
        this.context = context;
        LayoutInflater mInflater = LayoutInflater.from(context);
        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);
    }


    @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 int getCount() {
        return mViews.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
}
mainactivity 
package com.example.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.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import com.example.viewpager.Adapter.ViewpagerAndPagerAdapter;

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private ViewPager mViewPager;
    private PagerAdapter mAdapter;

    // 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);
        setContentView(R.layout.activity_main);
        initView();
        initEvents();
    }

    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);
        mAdapter = new ViewpagerAndPagerAdapter(MainActivity.this);
        mViewPager.setAdapter(mAdapter);
    }
    private void initEvents()
    {
        mTabWeixin.setOnClickListener(MainActivity.this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);

        mViewPager.setOnPageChangeListener(new ViewPager.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;

                }

            }


            public void onPageScrolled(int arg0, float arg1, int arg2)
            {

            }
            public void onPageScrollStateChanged(int arg0)
            {

            }
        });
    }

    @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);
    }
}

Fragment的实现

顶部布局：top.xml 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:gravity="center"
    android:background="@drawable/bottom_bar"
    android:layout_height="45dp">

    <!--   注释的快捷键是Ctrl+Shift+/ -->
    <!--  layout_gravity是控件在父布局中的位置 -->
    <!--   gravity是控件中的内容在控件中的位置-->
    <TextView
       android:layout_gravity="center"
       android:gravity="left|center"
        android:text="@string/weixin"
        android:textColor="#ffffff"
        android:layout_width="match_parent"
        android:textStyle="bold"
        android:layout_height="match_parent" />


</LinearLayout>
底部布局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="60dp"
    android:background="#ffffffff"

    android:orientation="horizontal" >

    <LinearLayout
        android:clickable="true"
        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="#000000" />
    </LinearLayout>

    <LinearLayout
        android:clickable="true"
        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="#000000" />
    </LinearLayout>

    <LinearLayout
        android:clickable="true"
        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="#000000" />
    </LinearLayout>

    <LinearLayout
        android:clickable="true"
        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="#000000"/>
    </LinearLayout>

</LinearLayout>
主布局 
<?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"></include>

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        ></FrameLayout>


    <include layout="@layout/bottom"></include>
</LinearLayout>
四个Fragment和四个Fragment布局文件
第一个微信 
package com.example.tab;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;



/**
 * Created by 小新 on 2016/4/30.
 */
public class WeixinFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab01,container,false);
    }
}

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

第二个朋友 
package com.example.tab;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;



/**
 * Created by 小新 on 2016/4/30.
 */
public class FrdFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab02,container,false);
    }
}

<?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 Frd Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

第三个通讯录 
package com.example.tab;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * Created by 小新 on 2016/4/30.
 */
public class AddressFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab03,container,false);
    }
}

<?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 Address Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

第四个设置 
package com.example.tab;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * Created by 小新 on 2016/4/30.
 */
public class SettingsFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab04,container,false);
    }
}

<?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 Settings Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
mainactivity 
package com.example.viewpager;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;

import com.example.viewpager.Adapter.ViewpagerAndPagerAdapter;
import com.example.viewpager.Fragment.AddressFragment;
import com.example.viewpager.Fragment.FrdFragment;
import com.example.viewpager.Fragment.SettingFragment;
import com.example.viewpager.Fragment.WeixinFragment;

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener{


    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSettings;

    private ImageButton mImgWeixin;
    private ImageButton mImgFrd;
    private ImageButton mImgAddress;
    private ImageButton mImgSettings;

    private Fragment mTab01;
    private Fragment mTab02;
    private Fragment mTab03;
    private Fragment mTab04;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();

    }
    private void initEvent()
    {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);
    }
    private void initView()
    {
        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);

        mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);
        mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img);
    }
    private void setSelect(int i)
    {
        FragmentManager fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        hideFragment(transaction);
        // 把图片设置为亮的
        // 设置内容区域
        switch (i)
        {
            case 0:
                if (mTab01 == null)
                {
                    mTab01 = new WeixinFragment();
                    transaction.add(R.id.id_content, mTab01);
                } else
                {
                    transaction.show(mTab01);
                }
                mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                if (mTab02 == null)
                {
                    mTab02 = new FrdFragment();transaction.add(R.id.id_content, mTab02);
                } else
                {
                    transaction.show(mTab02);

                }
                mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                if (mTab03 == null)
                {
                    mTab03 = new AddressFragment();
                    transaction.add(R.id.id_content, mTab03);
                } else
                {
                    transaction.show(mTab03);
                }
                mImgAddress.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                if (mTab04 == null)
                {
                    mTab04 = new SettingFragment();
                    transaction.add(R.id.id_content, mTab04);
                } else
                {
                    transaction.show(mTab04);
                }
                mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
                break;

            default:
                break;
        }

        transaction.commit();
    }
    //隐藏Fragment
    private void hideFragment(FragmentTransaction transaction)
    {
        if (mTab01 != null)
        {
            transaction.hide(mTab01);
        }
        if (mTab02 != null)
        {
            transaction.hide(mTab02);
        }
        if (mTab03 != null)
        {
            transaction.hide(mTab03);
        }
        if (mTab04 != null)
        {
            transaction.hide(mTab04);
        }
    }


    @Override
    public void onClick(View v)
    {
        resetImgs();
        switch (v.getId())
        {
            case R.id.id_tab_weixin:
                setSelect(0);
                break;
            case R.id.id_tab_frd:
                setSelect(1);
                break;
            case R.id.id_tab_address:
                setSelect(2);
                break;
            case R.id.id_tab_settings:
                setSelect(3);
                break;

            default:
                break;
        }
    }
    private void resetImgs()
    {
        mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgAddress.setImageResource(R.drawable.tab_address_normal);
        mImgSettings.setImageResource(R.drawable.tab_settings_normal);
    }
}
Fragment是不可以滑动的，viewpager是可以右滑的，QQ每一个可以右滑删除就是用了Fragment（这样就一个聊天窗口右滑删除和一个页面的右滑就没有冲突了），微信用viewpager可以右滑

Viewpager+FragmentPagerAdapter实现

基本界面：顶部一个微信标题 中部一个Viewpager实现活动显示页面 底部一个可选择活动的四个按钮
实现方法
顶部布局：top.xml 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:gravity="center"
    android:background="@drawable/bottom_bar"
    android:layout_height="45dp">

    <!--   注释的快捷键是Ctrl+Shift+/ -->
    <!--  layout_gravity是控件在父布局中的位置 -->
    <!--   gravity是控件中的内容在控件中的位置-->
    <TextView
       android:layout_gravity="center"
       android:gravity="left|center"
        android:text="@string/weixin"
        android:textColor="#ffffff"
        android:layout_width="match_parent"
        android:textStyle="bold"
        android:layout_height="match_parent" />


</LinearLayout>
底部布局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="60dp"
    android:background="#ffffffff"

    android:orientation="horizontal" >

    <LinearLayout
        android:clickable="true"
        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="#000000" />
    </LinearLayout>

    <LinearLayout
        android:clickable="true"
        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="#000000" />
    </LinearLayout>

    <LinearLayout
        android:clickable="true"
        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="#000000" />
    </LinearLayout>

    <LinearLayout
        android:clickable="true"
        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="#000000"/>
    </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"
    tools:context="com.example.tab.MainActivity">

    <include layout="@layout/top"></include>

    <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"></include>
</LinearLayout>
四个Fragment和四个Fragment布局文件
第一个微信 
package com.example.tab;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;



/**
 * Created by 小新 on 2016/4/30.
 */
public class WeixinFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab01,container,false);
    }
}

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

第二个朋友 
package com.example.tab;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;



/**
 * Created by 小新 on 2016/4/30.
 */
public class FrdFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab02,container,false);
    }
}

<?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 Frd Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

第三个通讯录 
package com.example.tab;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * Created by 小新 on 2016/4/30.
 */
public class AddressFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab03,container,false);
    }
}

<?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 Address Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

第四个设置 
package com.example.tab;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * Created by 小新 on 2016/4/30.
 */
public class SettingsFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab04,container,false);
    }
}

<?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 Settings Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

Viewpager的设配器 因为是Viewpager中加载Fragment所以用FragmentViewpagerAdapter 
package com.example.tab;


import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;


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

/**
 * Created by 小新 on 2016/4/30.
 * 设配器
 */
public class FragmentAndViewpagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> mFragments;
    public FragmentAndViewpagerAdapter(FragmentManager fm) {
        super(fm);
        mFragments = new ArrayList<Fragment>();
        Fragment mTab01 = new WeixinFragment();
        Fragment mTab02 = new FrdFragment();
        Fragment mTab03 = new AddressFragment();
        Fragment mTab04 = new SettingsFragment();
        mFragments.add(mTab01);
        mFragments.add(mTab02);
        mFragments.add(mTab03);
        mFragments.add(mTab04);
    }
    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }
}

mainactivity中 
package com.example.tab;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

        //viewpager＋FragmentPagerAdapter实现
        //viewpager可滑动
    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mFragments;

    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSettings;

    private ImageButton mImgWeixin;
    private ImageButton mImgFrd;
    private ImageButton mImgAddress;
    private ImageButton mImgSettings;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
        initEvent();
    }
    //点击事件
    private void initEvent()
    {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);
    }
    //初始化数据
    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);
        //找到按钮 滑动的时候改变图片
        mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);
        mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img);
        //实例化适配器
        mAdapter = new FragmentAndViewpagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);
        //活动的监听事件
        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener()
        {
            public void onPageSelected(int arg0)
            {
                int currentItem = mViewPager.getCurrentItem();
                setTab(currentItem);
            }
            public void onPageScrolled(int arg0, float arg1, int arg2)
            {
                // TODO Auto-generated method stub

            }
            public void onPageScrollStateChanged(int arg0)
            {
                // TODO Auto-generated method stub

            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId())
        {
            case R.id.id_tab_weixin:
                setSelect(0);
                break;
            case R.id.id_tab_frd:
                setSelect(1);
                break;
            case R.id.id_tab_address:
                setSelect(2);
                break;
            case R.id.id_tab_settings:
                setSelect(3);
                break;
            default:
                break;
        }
    }

    private void setSelect(int i)
    {
        setTab(i);
        // 切换内容区域
        mViewPager.setCurrentItem(i);
    }

    private void setTab(int i)
    {
        resetImgs();
        // 设置图片为亮色
        switch (i)
        {
            case 0:
                mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                mImgAddress.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
                break;
        }
    }

    //切换图片到暗色
    private void resetImgs()
    {
        mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgAddress.setImageResource(R.drawable.tab_address_normal);
        mImgSettings.setImageResource(R.drawable.tab_settings_normal);
    }

}


链接
Viewpager实现的Demo  https://github.com/xin917480852/Viewpager
Fragment实现的Demo   https://github.com/xin917480852/FragmentTab
Viewpager+Viewpager实现的Demo    https://github.com/xin917480852/ViewpagerAndFragment
xin917480852
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ios模仿新闻类app的tab样式
04-19
ios模仿新闻类app的tab样式
APP-Tabs:多种多样的App主界面Tab实现方法
06-13
多种多样的App主界面Tab实现方法 TAB第一种实现方式：ViewPager+RadioGroup TAB第二种实现方式：Fragment+RadioGroup TAB第三种实现方式：FragmentPagerAdapter+ViewPager TAB第四种实现方式：ViewPagerIndicator+...
APP主界面Tab的4种实现
冬眠FF的博客
03-04 3766
涉及知识点：1.在LinearLayout中,如果一个控件在中间，要想让该控件占据剩余的空间，使用match_parent会导致它底部的控件被挤出去，所以要使用layout_weight=1 height=0dp. 2.eclipse 快捷键 自动修正 Ctrl+1 （可以用于强转，导入） 3.为LinearLayout设置点击事件，如果该布局含有ImageButton,点击事件会被ImageB
uniApp开发小程序自定义tabBar底部导航栏+tabBar中间凸起自定义样式实现
最新发布
m0_60859997的博客
11-25 1万+
我要卖我要买
AppBar 定义 顶部Tab切换 - flutter
LiErDan的博客
12-04 314
使用DefaultTabController,Scaffold 嵌套 出现了双 appBar的解决方案, 一种是放在appBar的title里, 效果不理想.一种是在内层appBar的title是null, 调整appBar的toolbarHeight import 'package:flutter/material.dart'; import 'package:flutter_app/pages/HomeContent.dart'; class Search extends StatefulWidget
app 首页主流样式：ViewPager + TabLayout + Fragment
Alpinist Wang
02-15 884
ViewPager+TagLayout+Fragment是现在app的主流样式。
多种多样的App主界面Tab实现方法
03-03
本文将深入探讨四种常见的App主界面Tab实现方法，帮助开发者和设计师更好地理解并选择适合的Tab设计方案。 ### 1. 固定Tab 固定Tab是最常见的一种实现方式，它始终保持在屏幕底部，通常包含3到5个Tab，每个Tab对应...
4种App主界面Tab实现方法的源代码
09-09
本资源包含了四种实现App主界面Tab的源代码，旨在帮助开发者理解并掌握不同的实现方式，提升用户体验。下面我们将详细探讨这四种方法。 1. **Android原生TabLayout** Android SDK提供了一个名为`TabLayout`的组件...
MATLAB APP design-APP登录界面的设计
02-19
在账号和密码提示框中输入相关信息，当输入的账号和密码正确时，点击登录按钮后，登录界面会跳转到工作界面，如果输入的账号和密码错误，则会提示账号和密码错误的信息...跳转界面可以通过修改程序中的Run函数来实现。
Android实现简洁的APP登录界面
01-05
今天需求要做一个所有app都有的登录界面，正好巩固一下我们之前学的基础布局知识。 先来看下效果图 1.布局的xml文件 <?xml version=1.0 encoding=utf-8?> android:layout_width=match_parent android:...
App主界面Tab的四种实现方法（上）
Sunny的博客
03-21 3867
慕课网有门讲解 Android App 中带有多个 tab 页面切换（比如微信的四个tab）的四种实现方式的课，早就看完了，觉得不错，在这里记录一下，代码不会贴全，但我会把关键代码都贴上，附上关键步骤的实现介绍。希望能帮到需要的人。有任何不明白的点，可以在下面留言，我看到后会在第一时间回复你。 四种方式我都会先贴上布局代码，然后贴上实现布局需要的适配器或者 Fragment 代码，最后贴主 A
8种移动APP导航设计模式大对比
泡面小七
08-07 904
当我们确定了移动APP的设计需求和APP产品设计流程之后，开始着手设计APP界面UI或是APP原型图啦。这个时候我们都要面临的第一个问题就是如何将信息以最优的方式组合起来？ 也许我们对比和了解了其他一些常用的APP导航设计模式。 而且良好的APP导航设计模式决策对整个app的核心体验起到关键作用。 之前跟大家分享过6个超实用的APP导航设计方案和3种常见的APP导航设计方案优劣势
App主界面Tab的四种实现方法（下）
Sunny的博客
03-21 1894
上一篇我们介绍了 ViewPager 实现 Tab 和 Fragment 实现 Tab，本篇会继续介绍剩下的两种。FragmentPagerAdapter+ViewPager 实现 Tab 和 ViewPagerIndicator+ViewPager 实现 Tab。 3.FragmentPagerAdapter+ViewPager 实现 Tab大概做法就是将 Fragments 作为 ViewPag
Tab页面切换之3种方法
全干工程师
07-31 3971
**************************************ViewPager*************************************************** activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xm
自定义AppBar按钮,及实现tab切换
qq_42572245的博客
06-11 355
import 'package:flutter/material.dart'; class AppBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( //backgroundColor: Colors.deepPurpleAccent,//改变基本背景颜色 leading.
App界面Tab选项卡之ViewPager
曹建涛的博客
08-21 2935
说到现在app的Tab选项卡，随处可见，微信、QQ音乐数不胜数，因此了解并掌握实现原理显得尤为重要。原理并不是特别的复杂，初学android一定要多动手，多敲代码。今天就说说App界面Tab选项卡之ViewPager。先说说ViewPager，附加于android-support-v4.jar中，用于实现view之间的相互切换，一般新建时便会自动生成，在xml中应用须输入完整路径，例如：<andro
uni-app 顶部tab切换菜单 顶部可滑动切换菜单
zhongli_的博客
06-10 7324
顶部tab切换菜单（都是最基础的） 第一种卡片切换 demo.vue <view class="tab"> <view class="tabItem" :class="{'active' : 0 == current}" @click="clickTab(0)"> 自选 </view> <view class="tabItem" :class="{'...
android 流行标签样式,android-TabLayout标签样式
weixin_36476970的博客
05-26 442
android-TabLayout标签样式我使用com.android.support:design库中的新TabLayout。 我想更改选定/未选定选项卡的背景。我查看了源代码，发现只有tabBackground属性可以更改所有标签的颜色，并且不能控制所选标签的颜色。如何控制选中/未选中的标签背景？4个解决方案154 votes限定：@dimen/tab_max_width?attr/color...
APP设计中的选项卡式（tab）导航
05-15 7433
在我们的产品中，导航起到了举足轻重的作用。导航相信大家都不陌生，它可以让我们知道“我现在在哪里”“我可以去哪里”“我怎么去目的地”。在手机端里面，导航尤为重要。因为手机的尺寸问题，在设计手机网站或APP的时候，比起web端的需要考虑的更周全，尽量保持简约和易用性高。 选项卡式（tab）导航可以说是最常见的导航了，尤其是APP。大部分的APP都采用这种导航模式作为主导航，有时也会将tab导航和其他的...
Android应用主界面设计：仿QQTab切换实现
这篇文章深入探讨了如何使用fragment来构建一个类似QQ的经典Android应用主界面，包括底部tab栏的实现、顶部标题栏的设计以及中间内容的动态切换。对于想要学习和理解Android应用框架设计的开发者来说，这是一个有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值