Android主布局框架整理
2024-05-15 01:25:35
Android主布局框架整理
本篇内容小生主要介绍的是几种常见的主框架的布局实现方式，仅供各位客官茶饭之余略微点评。闲话不说，切入正题。
-No1.TabActivity+TabHost实现普通tab栏切换
最终效果如下：
虽然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>();@Overrideprotected 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;}@Overridepublic 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;@Overrideprotected 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); // 默认显示tab1mFragTran.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;@Overrideprotected 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() {@Overridepublic 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;@Overrideprotected 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;}@Overridepublic Fragment getItem(int position) {return mList.get(position);}@Overridepublic 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;@Overrideprotected 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();}// 默认初始化只显示tab1if (!mTab1Fragment.isAdded()) {getSupportFragmentManager().beginTransaction() .add(R.id.container, mTab1Fragment, "Tab1Fragment") .commit();}mNavMenu.setNavigationItemSelectedListener(this);}@Overrideprotected 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*/@Overridepublic 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;}
}
结尾：额，经此梳理，算是再复习一次吧。下铺的兄弟，记得关灯。。。
Android主布局框架整理相关推荐
- android 2018优秀框架整理
程序员界有个神奇的网站,那就是github,这个网站集合了一大批优秀的开源框架,极大地节省了开发者开发的时间,在这里我进行了一下整理,这样可以使我们在使用到时快速的查找到,希望对大家有所帮助! 1. ...
- Android电池管理系统框架整理
一.Android 电池服务 Android电池服务,用来监听内核上报的电池事件,并将最新的电池数据上报给系统,系统收到新数据后会去更新电池显示状态.剩余电量等信息.如果收到过温报警和低电报警,系统会 ...
- android tab布局框架,android Tab页详解
一.android Tab的实现方式总结 说起Tab页,基本每个做移动端的都会需要.iOS中内置了一个,所以ioser用起来很方便.而android这一块就比较乱. 木器实现Tab效果的方式,主要有4 ...
- android 常用框架整理
文章目录 UI 框架 WebView 框架 具体内容 UI 卫星菜单 节选器 下拉刷新 模糊效果 HUD与Toast 进度条 UI其他 动画 网络相关 网络连接 网络测试 图像获取 响应式编程 地图 ...
- 史上最全Android开发中100%会用到的开源框架整理（1/5）
其实这个开源框架整理很久了,只是一直放在有道云笔记里面,笔者还有很多写得文章都放在有道云笔记里面,有时间都好好整理一下放出来,本篇文章也会不定期更新,由于整理的开源框架分类都有200多个,所有这次只将 ...
- Android常用优秀开源框架整理
转载brave-sailor大神的笔记,自己记录一份,便于查阅 前言 AOSF:全称为Android Open Source Framework,即Android优秀开源框架汇总.包含:网络请求okh ...
- 各种Android UI开源框架 开源库
各种Android UI开源框架 开源库 转 https://blog.csdn.net/zhangdi_gdk2016/article/details/84643668 自己总结的Android开源 ...
- Android 开源UI框架汇总
1. github排名 https://github.com/trending,github搜索:https://github.com/search 2.https://github.com/wasa ...
- 各种Android UI开源框架
自己总结的Android开源项目及库. github排名 https://github.com/trending,github搜索:https://github.com/search Android库 ...
最新文章
- 微型计算机显卡必须插在主板的,第一章 计算机基础知识(2)
- Mac OS X 在Finder新建文本文件
- mysql 复制用户_MySQL修改复制用户及密码
- 6 操作系统第二章 进程管理 处理机调度
- js 读取excel 导入mysql_可以读取EXCEL文件的js代码
- HDU 5136 Yue Fei's Battle
- 实例 20 重定向输出流实现程序日志
- struts的action访问servlet的IOC方式与非IOC方式
- 【SpringBoot_ANNOTATIONS】自动装配 05 @Profile环境搭建
- 【Hibernate】ch01Demo
- 说说“安规”的那些事儿
- java.io的缓冲流、转换流、序列化流
- python双样本t检验_两样本t检验的scipy实现
- 前端性能优化，之还在为多种多样的知识点整理苦恼吗，进来看看吧。
- 用户注册时，密码的加密存储方式
- NUIST第三届程序设计团体赛试题
- 计算机英语单词怎么巧背,巧背英语单词的方法
- java怎么逐行读取一个文件内容，并把每行顺序打乱存入另外一个文件中
- ESP32S2 固件烧录需满足的硬件环境整理
- 一加9pro安装配置charles（mac下）及手机配置ca证书