Android主布局框架整理

最新推荐文章于 2024-04-06 11:48:14 发布

篮球小生

最新推荐文章于 2024-04-06 11:48:14 发布

阅读量1.5k

点赞数 3

分类专栏： Android

本文链接：https://blog.csdn.net/lhx_csdn/article/details/59525322

版权

Android 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Android主布局框架整理

本篇内容小生主要介绍的是几种常见的主框架的布局实现方式，仅供各位客官茶饭之余略微点评。闲话不说，切入正题。

-No1.TabActivity+TabHost实现普通tab栏切换
最终效果如下：
本文素材来自iconfont下载的svg格式素材
虽然TabActivity已经过时，但是小生相信还是有许多老一辈同学依旧在自己的code中乐此不疲的用着此等控件，故此文也列举出此方式。以下小生为各位看官奉上友情代码

  【1】首先是activity_main.layout主布局代码

<?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.allen.demo.MainActivity">

    <!--TabHost  此处id为Android自带的tabhost-->
    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <!-- 填充内容 此处id为Android自带的tabcontent-->
            <FrameLayout
                android:background="@android:color/white"
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
            </FrameLayout>

            <!--底部指示器  此处id为Android自带的tabs-->
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/white">
            </TabWidget>

        </LinearLayout>

    </TabHost>

</LinearLayout>

【2】其次是MainActivity.java文件,直接上代码

package com.allen.demo;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

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

public class MainActivity extends TabActivity implements TabHost.OnTabChangeListener {

    TabHost mTabHost;
    List<View> btmViewList = new ArrayList<View>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化TabHost容器
        mTabHost = getTabHost();
        // 创建Tab内容
        TabHost.TabSpec mSpecWeChat = mTabHost.newTabSpec("tab0");
        mSpecWeChat.setIndicator(createBottomView(1));
        mSpecWeChat.setContent(new Intent(this, ShowTab1Activity.class));
        mTabHost.addTab(mSpecWeChat);

        TabHost.TabSpec mSpecNoteList = mTabHost.newTabSpec("tab1");
        mSpecNoteList.setIndicator(createBottomView(2));
        mSpecNoteList.setContent(new Intent(this, ShowTab2Activity.class));
        mTabHost.addTab(mSpecNoteList);

        TabHost.TabSpec mSpecDiscovery = mTabHost.newTabSpec("tab2");
        mSpecDiscovery.setIndicator(createBottomView(3));
        mSpecDiscovery.setContent(new Intent(this, ShowTab3Activity.class));
        mTabHost.addTab(mSpecDiscovery);

        TabHost.TabSpec mSpecMine = mTabHost.newTabSpec("tab3");
        mSpecMine.setIndicator(createBottomView(4));
        mSpecMine.setContent(new Intent(this, ShowTab4Activity.class));
        mTabHost.addTab(mSpecMine);


        // 添加切换监听
        mTabHost.setOnTabChangedListener(this);
        // 设置默认选择
        mTabHost.setCurrentTab(0);
    }

    /**
     * 初始化时创建底部Tab文本栏
     * @param i
     * @return
     */
    private View createBottomView(int i) {
        View btmView = getLayoutInflater().inflate(R.layout.layout_main_bottom, null);
        ImageView tabImageView =(ImageView)btmView.findViewById(R.id.tabImageView);
        TextView tabTextView = (TextView)btmView.findViewById(R.id.tabTextView);
        switch (i) {
            case 1:
                tabImageView.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.main_tab1));
                tabTextView.setText(getResources().getString(R.string.main_tab1));
                tabTextView.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
                break;
            case 2:
                tabImageView.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.main_tab2));
                tabTextView.setText(getResources().getString(R.string.main_tab2));
                tabTextView.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
                break;
            case 3:
                tabImageView.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.main_tab3));
                tabTextView.setText(getResources().getString(R.string.main_tab3));
                tabTextView.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
                break;
            case 4:
                tabImageView.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.main_tab4));
                tabTextView.setText(getResources().getString(R.string.main_tab4));
                tabTextView.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
                break;
        }
        btmViewList.add(btmView);
        return btmView;
    }

    @Override
    public void onTabChanged(String tabId) {
        for(int i=0; i<btmViewList.size(); i++) {
            if(tabId.equalsIgnoreCase("tab"+i)) {
                TextView tabTextView = (TextView)btmViewList.get(i).findViewById(R.id.tabTextView);
                tabTextView.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
            }else{
                TextView tabTextView = (TextView)btmViewList.get(i).findViewById(R.id.tabTextView);
                tabTextView.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
            }
        }
    }
}

【3】以上代码中用到的底部Tab文本布局layout_main_bottom.xml，当然此处也可以用动态java文件直接去创建布局创建ImageView和TextView来实现此等简单布局。此处只是简单实现。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout style="@style/MainBottomStyle">
        <ImageView
            android:id="@+id/tabImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <TextView
            android:id="@+id/tabTextView"
            android:layout_marginTop="@dimen/dimen5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>


</LinearLayout>

【4】因为main_tab1到main_tab4为同类布局，此处只展示tab1的代码，是个简单的选择器布局。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/ic_wechat_select" android:state_selected="true"/>
    <item android:drawable="@drawable/ic_wechat_unselect" android:state_selected="false"/>
    <item android:drawable="@drawable/ic_wechat_unselect"/>

</selector>

【5】选择器中所使用的drawable均来自IconFont的svg素材，此处展示其中之一

<vector android:height="24dp" android:viewportHeight="1024.0"
    android:viewportWidth="1024.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#51C332" android:pathData="M812.7,584.6c-16.9,0 -36.3,-16.9 -36.3,-36.3 0,-16.9 16.9,-36.3 36.3,-36.3 27.2,0 44.1,16.9 44.1,36.3 1.3,18.1 -18.1,36.3 -44.1,36.3m-198.3,0c-16.9,0 -36.3,-16.9 -36.3,-36.3 0,-16.9 16.9,-36.3 36.3,-36.3 27.2,0 44.1,16.9 44.1,36.3 2.6,18.1 -16.9,36.3 -44.1,36.3m405.7,42.8c0,-143.9 -143.9,-260.5 -304.6,-260.5 -171.1,0 -304.6,116.7 -304.6,260.5s134.8,260.5 304.6,260.5c36.3,0 71.3,-10.4 107.6,-16.9l97.2,53.1 -27.2,-90.7c72.6,-51.8 127,-124.4 127,-206.1"/>
    <path android:fillColor="#51C332" android:pathData="M246.3,339.6c-27.2,0 -53.1,-16.9 -53.1,-44.1s27.2,-44.1 53.1,-44.1 44.1,16.9 44.1,44.1c2.6,27.2 -16.9,44.1 -44.1,44.1m251.5,-86.8c27.2,0 44.1,16.9 44.1,44.1s-16.9,44.1 -44.1,44.1 -53.1,-16.9 -53.1,-44.1 25.9,-44.1 53.1,-44.1m194.4,94.6c11.7,0 22,0 33.7,2.6C694.8,206.1 541.8,98.5 362.9,98.5 165.9,98.5 3.9,232 3.9,403.1c0,97.2 53.1,180.2 143.9,241.1L111.5,751.8l124.4,-63.5c44.1,10.4 80.4,16.9 127,16.9 11.7,0 22,0 33.7,-2.6 -7.8,-24.6 -11.7,-49.3 -11.7,-75.2 0,-150.4 137.4,-280 307.2,-280"/>
</vector>

顺便奉上SVG素材(使用.svg格式的好处此处不做说明，有需要了解的同学请自行度之)下载的传送门阿里素材图库

No2.Fragment+普通布局实现以上效果
这种实现比较简单，不做过多说明，直接上代码。
【1】首先看布局文件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.allen.demo.MainActivity">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <!-- 布局容器用来填充内容 -->
            <FrameLayout
                android:id="@+id/container"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
            </FrameLayout>

            <!-- 底部tab布局-->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <LinearLayout
                    android:id="@+id/tab1Layout"
                    style="@style/MainBottomStyle">
                    <ImageView
                        android:id="@+id/tab1ImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/main_tab1"/>
                    <TextView
                        android:id="@+id/tab1TextView"
                        android:layout_marginTop="@dimen/dimen5"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/main_tab1"/>
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2Layout"
                    style="@style/MainBottomStyle">
                    <ImageView
                        android:id="@+id/tab2ImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/main_tab2"/>
                    <TextView
                        android:id="@+id/tab2TextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/dimen5"
                        android:text="@string/main_tab2"/>
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab3Layout"
                    style="@style/MainBottomStyle">
                    <ImageView
                        android:id="@+id/tab3ImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/main_tab3"/>
                    <TextView
                        android:id="@+id/tab3TextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/dimen5"
                        android:text="@string/main_tab3"/>
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab4Layout"
                    style="@style/MainBottomStyle">
                    <ImageView
                        android:id="@+id/tab4ImageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/main_tab4"/>
                    <TextView
                        android:id="@+id/tab4TextView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/dimen5"
                        android:text="@string/main_tab4"/>
                </LinearLayout>



            </LinearLayout>

        </LinearLayout>


</LinearLayout>

【2】其次看java文件的改动MainActivity.java

package com.allen.demo;

import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import butterknife.ButterKnife;
import butterknife.InjectView;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    @InjectView(R.id.container)
    FrameLayout mLayoutContainer;
    @InjectView(R.id.tab1ImageView)
    ImageView mTab1Image;
    @InjectView(R.id.tab1TextView)
    TextView mTab1Text;
    @InjectView(R.id.tab1Layout)
    LinearLayout mTab1;
    @InjectView(R.id.tab2ImageView)
    ImageView mTab2Image;
    @InjectView(R.id.tab2TextView)
    TextView mTab2Text;
    @InjectView(R.id.tab2Layout)
    LinearLayout mTab2;
    @InjectView(R.id.tab3ImageView)
    ImageView mTab3Image;
    @InjectView(R.id.tab3TextView)
    TextView mTab3Text;
    @InjectView(R.id.tab3Layout)
    LinearLayout mTab3;
    @InjectView(R.id.tab4ImageView)
    ImageView mTab4Image;
    @InjectView(R.id.tab4TextView)
    TextView mTab4Text;
    @InjectView(R.id.tab4Layout)
    LinearLayout mTab4;


    FragmentManager mFragManager;
    FragmentTransaction mFragTran;
    Tab1Fragment mTab1Fragment;
    Tab2Fragment mTab2Fragment;
    Tab3Fragment mTab3Fragment;
    Tab4Fragment mTab4Fragment;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        // 初始化界面所需布局
        initView();
    }

    /**
     * 初始化界面所需布局
     */
    private void initView() {
        mFragManager = getSupportFragmentManager();
        mFragTran = mFragManager.beginTransaction();
        mTab1Fragment = new Tab1Fragment();
        mTab2Fragment = new Tab2Fragment();
        mTab3Fragment = new Tab3Fragment();
        mTab4Fragment = new Tab4Fragment();

        mTab1Image.setSelected(true);
        mTab1Text.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
        mFragTran.add(R.id.container, mTab1Fragment);  // 默认显示tab1
        mFragTran.commit();

    }

    @OnClick({R.id.tab1Layout, R.id.tab2Layout, R.id.tab3Layout, R.id.tab4Layout})
    public void onClick(View view) {
        mTab1Image.setSelected(false);
        mTab2Image.setSelected(false);
        mTab3Image.setSelected(false);
        mTab4Image.setSelected(false);
        mTab1Text.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
        mTab2Text.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
        mTab3Text.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));
        mTab4Text.setTextColor(ContextCompat.getColor(this, R.color.tab_unselect));

        switch (view.getId()) {
            case R.id.tab1Layout:
                // 微信
                if(mTab1Fragment == null) {
                    mTab1Fragment = new Tab1Fragment();
                }
                mFragTran = mFragManager.beginTransaction();
                mFragTran.replace(R.id.container, mTab1Fragment).commit();
                mTab1Image.setSelected(true);
                mTab1Text.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
                break;
            case R.id.tab2Layout:
                // 通讯录
                if(mTab2Fragment == null) {
                    mTab2Fragment = new Tab2Fragment();
                }
                mFragTran = mFragManager.beginTransaction();
                mFragTran.replace(R.id.container, mTab2Fragment).commit();
                mTab2Image.setSelected(true);
                mTab2Text.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
                break;
            case R.id.tab3Layout:
                // 发现
                if(mTab3Fragment == null) {
                    mTab3Fragment = new Tab3Fragment();
                }
                mFragTran = mFragManager.beginTransaction();
                mFragTran.replace(R.id.container, mTab3Fragment).commit();
                mTab3Image.setSelected(true);
                mTab3Text.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
                break;
            case R.id.tab4Layout:
                // 我
                if(mTab4Fragment == null) {
                    mTab4Fragment = new Tab4Fragment();
                }
                mFragTran = mFragManager.beginTransaction();
                mFragTran.replace(R.id.container, mTab4Fragment).commit();
                mTab4Image.setSelected(true);
                mTab4Text.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
                break;
        }
    }

}

No3.FragmentTabHost+Fragment实现普通tab栏切换
这一对组件的搭配出现就是为了代替第一组（TabActivity+TabHost）。下边贴出代码。
【1】布局文件

<?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.allen.demo.MainActivity">

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

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>


</LinearLayout>

【2】类文件

package com.allen.demo;

import android.os.Bundle;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    FragmentTabHost mTabHost;
    LayoutInflater mInflater;
    Class[] mFragments;
    int[] mImageReses;
    String[] mTextStrs;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        // 初始化界面所需布局
        initView();
    }

    /**
     * 初始化界面所需布局
     */
    private void initView() {
        mInflater = LayoutInflater.from(this);

       mFragments = new Class[]{ Tab1Fragment.class, Tab2Fragment.class, Tab3Fragment.class, Tab4Fragment.class };
       mImageReses = new int[]{ R.drawable.main_tab1, R.drawable.main_tab2, R.drawable.main_tab3, R.drawable.main_tab4 };
       mTextStrs = new String[]{ getString(R.string.main_tab1), getString(R.string.main_tab2), getString(R.string.main_tab3), getString(R.string.main_tab4)  };

        mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.mainContent);//实际界面内容

        for(int i=0; i<mFragments.length; i++) {
            TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTextStrs[i]).setIndicator(createBottomView(i));
            mTabHost.addTab(tabSpec, mFragments[i], null);
        }
        //设置第一个的颜色
        View childAt = mTabHost.getTabWidget().getChildAt(0);
        TextView tvTab = (TextView) childAt.findViewById(R.id.tabTextView);
        tvTab.setTextColor(ContextCompat.getColor(this, R.color.tab_select));
        mTabHost.setOnTabChangedListener(myTabChangeListernr);
    }

    /**
     * 初始化时创建底部Tab文本栏
     * @param i
     * @return
     */
    private View createBottomView(int i) {
        View btmView = mInflater.inflate(R.layout.layout_main_bottom, null);
        ImageView tabImageView =(ImageView)btmView.findViewById(R.id.tabImageView);
        TextView tabTextView = (TextView)btmView.findViewById(R.id.tabTextView);

        tabImageView.setImageResource(mImageReses[i]);
        tabTextView.setText(mTextStrs[i]);
        return btmView;
    }

    private TabHost.OnTabChangeListener myTabChangeListernr = new TabHost.OnTabChangeListener() {
        @Override
        public void onTabChanged(String tabId) {
            for (int i = 0; i < mTextStrs.length; i++) {
                // 设置Tab按钮的背景
                View childAt = mTabHost.getTabWidget().getChildAt(i);
                TextView tvTab = (TextView) childAt.findViewById(R.id.tabTextView);

                if(mTextStrs[i].equals(tabId)) {
                    tvTab.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.tab_select));
                }else{
                    tvTab.setTextColor(ContextCompat.getColor(MainActivity.this, R.color.tab_unselect));
                }
            }
        }
    };

}

No4.TabLayout +ViewPager 实现滑动的布局
TabLayout是谷歌MD设计理念下诞生的控件之一。此处做以简单应用来实现上述效果。
【1】.添加依赖
compile ‘com.android.support:design:25.0.0’
【2】.布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.allen.demo.MainActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/view_pager"/>

    <!--
    app:tabIndicatorColor="@color/white"                 // 下方滚动的下划线颜色
    app:tabSelectedTextColor="@color/gray"               // tab被选中后，文字的颜色
    app:tabTextColor="@color/white"                      // tab默认的文字颜色
    -->
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@android:color/white"
        app:tabTextColor="@color/tab_unselect"
        app:tabSelectedTextColor="@color/tab_select"
        app:tabGravity="fill"
        android:id="@+id/tab_layout" />

</LinearLayout>

【3】.类文件

package com.allen.demo;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

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

import butterknife.ButterKnife;
import butterknife.InjectView;

public class MainActivity extends AppCompatActivity {


    @InjectView(R.id.view_pager)
    ViewPager mViewPager;
    @InjectView(R.id.tab_layout)
    TabLayout mTabLayout;

    private Tab1Fragment mTab1Fragment;
    private Tab2Fragment mTab2Fragment;
    private Tab3Fragment mTab3Fragment;
    private Tab4Fragment mTab4Fragment;
    private List<Fragment> mList;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        // 初始化界面所需布局
        initView();
    }

    /**
     * 初始化界面所需布局
     */
    private void initView() {
        mList = new ArrayList<>();
        mTab1Fragment = new Tab1Fragment();
        mTab2Fragment = new Tab2Fragment();
        mTab3Fragment = new Tab3Fragment();
        mTab4Fragment = new Tab4Fragment();
        mList.add(mTab1Fragment);
        mList.add(mTab2Fragment);
        mList.add(mTab3Fragment);
        mList.add(mTab4Fragment);

        mViewPager.setOffscreenPageLimit(3);
        mViewPager.setAdapter(new MainAdapter(getSupportFragmentManager(), mList));

        initBottomView();
    }

    /**
     * 初始化底部文本Tab栏
     */
    private void initBottomView() {
        mTabLayout.setupWithViewPager(mViewPager);
        int[] mIcons = { R.drawable.main_tab1, R.drawable.main_tab2, R.drawable.main_tab3, R.drawable.main_tab4};
        String[] txts = { getString(R.string.main_tab1), getString(R.string.main_tab2), getString(R.string.main_tab3), getString(R.string.main_tab4)};
        for(int i=0; i<mTabLayout.getTabCount(); i++) {
            mTabLayout.getTabAt(i).setText(txts[i]).setIcon(mIcons[i]);
        }
    }


    /**
     * 适配器
     */
    class MainAdapter extends FragmentPagerAdapter {

        private List<Fragment> mList;
        public MainAdapter(FragmentManager fm, List<Fragment> mList) {
            super(fm);
            this.mList = mList;
        }

        @Override
        public Fragment getItem(int position) {
            return mList.get(position);
        }

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


}

No5.DrawerLayout+NavigationView实现侧滑抽屉式布局
这一组要介绍的这对组件都是基于MD理念的产物，谷歌提倡实现抽屉效果时使用。直接进入主题。
【1】.先上效果图，北京图挺丑的，看官可以忽略。

【2】.展示主布局文件

<?xml version="1.0" encoding="utf-8"?>

<!-- 谷歌MD设计下的抽屉布局  实现侧滑效果-->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <!-- 底部主布局-->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>

    <!--
        NavigationView是谷歌MD设计下的导航菜单抽屉布局,
        当然此处也可以用ListView或者其他布局实现菜单导航，
        只是此处为了响应MD，
        故使用NavigationView控件 -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/main_drawer" />

</android.support.v4.widget.DrawerLayout>

【3】导航菜单布局文件

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single"
        android:id="@+id/group_main">
        <item
            android:id="@+id/main_tab1"
            android:icon="@drawable/main_tab1"
            android:title="@string/main_tab1" />
        <item
            android:id="@+id/main_tab2"
            android:icon="@drawable/main_tab2"
            android:title="@string/main_tab2" />
    </group>

    <group android:checkableBehavior="none"
        android:id="@+id/group_other">
        <item android:id="@+id/main_tab3"
            android:title="@string/main_tab3"
            android:icon="@drawable/main_tab3" />

        <item
            android:id="@+id/main_tab4"
            android:icon="@drawable/main_tab4"
            android:title="@string/main_tab4" />

    </group>

</menu>

【4】导航菜单头布局（只是简单的背景图片）

<?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="@mipmap/nav_header"
    android:gravity="bottom"
    android:orientation="vertical">

</LinearLayout>

【5】.类文件

package com.allen.demo;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;

import butterknife.ButterKnife;
import butterknife.InjectView;

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
    /**
     * 抽屉布局
     */
    @InjectView(R.id.drawer_layout)
    DrawerLayout mDrawerLayout;
    /**
     * 导航菜单布局
     */
    @InjectView(R.id.nav_view)
    NavigationView mNavMenu;

    Tab1Fragment mTab1Fragment;
    Tab2Fragment mTab2Fragment;
    Tab3Fragment mTab3Fragment;
    Tab4Fragment mTab4Fragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);

        if (savedInstanceState != null) {
            mTab1Fragment = (Tab1Fragment) getSupportFragmentManager().getFragment(savedInstanceState, "Tab1Fragment");
            mTab2Fragment = (Tab2Fragment) getSupportFragmentManager().getFragment(savedInstanceState, "Tab2Fragment");
            mTab3Fragment = (Tab3Fragment) getSupportFragmentManager().getFragment(savedInstanceState, "Tab3Fragment");
            mTab4Fragment = (Tab4Fragment) getSupportFragmentManager().getFragment(savedInstanceState, "Tab4Fragment");
        } else {
            mTab1Fragment = Tab1Fragment.newInstance();
            mTab2Fragment = Tab2Fragment.newInstance();
            mTab3Fragment = Tab3Fragment.newInstance();
            mTab4Fragment = Tab4Fragment.newInstance();
        }

        // 默认初始化只显示tab1
        if (!mTab1Fragment.isAdded()) {
            getSupportFragmentManager().beginTransaction() .add(R.id.container, mTab1Fragment, "Tab1Fragment") .commit();
        }

        mNavMenu.setNavigationItemSelectedListener(this);
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        if (mTab1Fragment.isAdded()) {
            getSupportFragmentManager().putFragment(outState, "Tab1Fragment", mTab1Fragment);
        }
        if (mTab2Fragment.isAdded()) {
            getSupportFragmentManager().putFragment(outState, "Tab2Fragment", mTab2Fragment);
        }
        if (mTab3Fragment.isAdded()) {
            getSupportFragmentManager().putFragment(outState, "Tab3Fragment", mTab3Fragment);
        }
        if (mTab4Fragment.isAdded()) {
            getSupportFragmentManager().putFragment(outState, "Tab4Fragment", mTab4Fragment);
        }
    }

    private void showTab1() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.show(mTab1Fragment);
        fragmentTransaction.hide(mTab2Fragment);
        fragmentTransaction.hide(mTab3Fragment);
        fragmentTransaction.hide(mTab4Fragment);
        fragmentTransaction.commit();
    }

    private void showTab2() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.show(mTab2Fragment);
        fragmentTransaction.hide(mTab1Fragment);
        fragmentTransaction.hide(mTab3Fragment);
        fragmentTransaction.hide(mTab4Fragment);
        fragmentTransaction.commit();
    }

    private void showTab3() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.show(mTab3Fragment);
        fragmentTransaction.hide(mTab1Fragment);
        fragmentTransaction.hide(mTab2Fragment);
        fragmentTransaction.hide(mTab4Fragment);
        fragmentTransaction.commit();
    }

    private void showTab4() {
        FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.show(mTab4Fragment);
        fragmentTransaction.hide(mTab1Fragment);
        fragmentTransaction.hide(mTab2Fragment);
        fragmentTransaction.hide(mTab3Fragment);
        fragmentTransaction.commit();
    }

    /**
     * 导航菜单子项点击事件处理
     * @param item
     * @return
     */
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        mDrawerLayout.closeDrawer(GravityCompat.START);

        int id = item.getItemId();
        if(id == R.id.main_tab1) {
            mNavMenu.getMenu().getItem(0).setChecked(true);
            showTab1();
        }else if(id == R.id.main_tab2) {
            mNavMenu.getMenu().getItem(1).setChecked(true);
            showTab2();
        }else if(id == R.id.main_tab3) {
            showTab3();
        }else if(id == R.id.main_tab4) {
            showTab4();
        }

        return true;
    }
}

结尾：额，经此梳理，算是再复习一次吧。下铺的兄弟，记得关灯。。。

篮球小生

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Android主布局框架整理

Android主布局框架整理本篇内容小生主要介绍的是几种常见的主框架的布局实现方式，仅供各位客官茶饭之余略微点评。闲话不说，切入正题。-No1.TabActivity+TabHost实现普通tab栏切换最终效果如下：虽然TabActivity已经过时，但是小生相信还是有许多老一辈同学依旧在自己的code中乐此不疲的用着此等控件，故此文也列举出此方式。以下
复制链接

扫一扫