Android开发：AS开发APP底下菜单栏设计
- 针对目前市面上的app，有很多软件都是采用下部菜单栏，像我的CSDN客户端App就是如此，那么接下来我就为大家讲解下如何定制自己的底下菜单栏，目前Sylanty知道两者解决方法最常用，我就在下一一揭晓：
1、ImageView控件与TextView控件联合
- 工程涉及文件，因为我的工程中用到了底下菜单栏，所以直接采用这个工程讲解，本次底下菜单栏就只涉及到这两个红框的文件。
- 其中主布局main_activity.xml文件，你只需要看菜单栏的代码就可以了，如你能理解这里面的全部代码，可以选择删除，如果不懂，你可以先不要管。
<?xml version="1.0" encoding="utf-8"?>
<!--suppress ALL -->
<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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="syvideo.sylanty.test.MainActivity"
tools:ignore="Orientation">
<!--标题栏设计部分-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_actionbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorStuActCom">
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="@android:color/black"
android:text="主页"
android:textSize="20sp"/>
</android.support.v7.widget.Toolbar>
<!--滑动页设计部分-->
<android.support.v4.view.ViewPager
android:layout_weight="1"
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="@+id/bottom_tab_layout">
</android.support.v4.view.ViewPager>
<!--菜单栏设计部分-->
<LinearLayout
android:id="@+id/bottom_tab_layout"
android:layout_alignParentBottom="true"
android:background="@android:color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="1dp">
<!--主页tab-->
<LinearLayout
android:id="@+id/home_layout"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/home_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/home"/>
<TextView
android:id="@+id/home_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="主页"
android:layout_gravity="center"
android:textSize="13sp"
android:textColor="@color/colorTextBlack"/>
</LinearLayout>
<!--我的tab-->
<LinearLayout
android:id="@+id/me_layout"
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/me_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/me"/>
<TextView
android:id="@+id/me_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的"
android:layout_gravity="center"
android:textSize="13sp"
android:textColor="@color/colorTextBlack"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
- 其中ManiActivity.java文件，控件控制代码如下：
package com.sylanty.syvideo;
import android.os.Build;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewConfiguration;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.List;
@SuppressWarnings({"deprecation", "ResourceType"})
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private ViewPager viewPager;
private ImageView homeImage,meImage;
private TextView homeText,meText,toolbartitle;
private LinearLayout homeLayout,meLayout;
private List<View> pages;
private CustomViewPagerAdapter customViewPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
initView();
homeLayout.setOnClickListener(this);
meLayout.setOnClickListener(this);
viewPager.setOnPageChangeListener(this);
}
//初始化对象
private void initView() {
homeImage = (ImageView) findViewById(R.id.home_icon);
homeText = (TextView) findViewById(R.id.home_text);
meImage = (ImageView) findViewById(R.id.me_icon);
meText = (TextView) findViewById(R.id.me_text);
homeLayout = (LinearLayout) findViewById(R.id.home_layout);
meLayout = (LinearLayout) findViewById(R.id.me_layout);
viewPager = (ViewPager) findViewById(R.id.viewpager);
toolbartitle =(TextView)findViewById(R.id.toolbar_title);
//初始化地下菜单
homeImage.setImageResource(R.drawable.home_blue);
homeText.setTextColor(getResources().getColor(R.color.colorTextBlue));
}
@Override
public void onClick(View v) {
resumeTab();
switch (v.getId()){
case R.id.home_layout:
homeImage.setImageResource(R.drawable.home_blue);
homeText.setTextColor(getResources().getColor(R.color.colorTextBlue));
toolbartitle.setText(R.string.app_home);
viewPager.setCurrentItem(0);
break;
case R.id.me_layout:
meImage.setImageResource(R.drawable.me_blue);
meText.setTextColor(getResources().getColor(R.color.colorTextBlue));
toolbartitle.setText(R.string.app_me);
viewPager.setCurrentItem(1);
break;
default:
break;
}
}
//将底部的tab颜色恢复原色
private void resumeTab() {
homeImage.setImageResource(R.drawable.home);
meImage.setImageResource(R.drawable.me);
homeText.setTextColor(getResources().getColor(R.color.colorTextBlack));
meText.setTextColor(getResources().getColor(R.color.colorTextBlack));
}
}
- 其编译后实现效果如下：
注意：
如果找不到变量使得编译不通过，请自己重新定义变量即可，因为本文中用到的变量就只有一些颜色和名称而已，这些是可以顺便换的，至于图标你可以在网上找，这里我还是贴上我收集的一些网站吧！
如果找不到定义处，可以先注释这段代码，毕竟没有用！！！
2、RadioButton控件
- 这里我就直接附上main_activity.xml主布局文件的菜单栏代码
<LinearLayout
android:background="@android:color/holo_red_light"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:button="@null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/home"
android:text="缓解"
android:gravity="center_horizontal"/>
<RadioButton
android:button="@null"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableTop="@drawable/me"
android:text="缓解"
android:gravity="center_horizontal"/>
</RadioGroup>
</LinearLayout>
注意：
RadioButton设置背景图片比较好弄，去掉单选的小园框只需要加android:button="@null"即可。如果既添加了图片又添加了文字，这时你就需要把android:background="“替换成android:drawableTop=”"；
android:gravity="center_horizontal"这是使文字与图片居中对齐的；
总结：
个人觉得使用RadioButton控件操作简单，比较好用，而第一种方法它的兼容性较强，各具优点吧！自己选择吧！
