Android开发:AS开发APP底下菜单栏设计

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控件操作简单,比较好用,而第一种方法它的兼容性较强,各具优点吧!自己选择吧!

为了曾经那个轻易许下的梦
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页