android 实现底部菜单实现

最新推荐文章于 2023-03-23 17:59:13 发布

weixin_33725515

最新推荐文章于 2023-03-23 17:59:13 发布

阅读量99

点赞数

文章标签：移动开发 java python

原文链接：https://my.oschina.net/Dougien/blog/600409

版权

2019独角兽企业重金招聘Python工程师标准>>>

下面先上底部菜单的布局文件

<?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="wrap_content"
    android:background="@drawable/ab_share" >

    <LinearLayout
          android:id="@+id/ll_home"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_weight="1"
         android:gravity="center"
          android:orientation="vertical" >

           <ImageView
               android:id="@+id/iv_home"
               android:layout_width="wrap_content"
                android:layout_height="wrap_content"
               android:src="@drawable/green24x24" />

            <TextView
                android:id="@+id/tv_home"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="3dp"
                 android:text="@string/ins_home"
                 android:textColor="#1B940A"
                 android:textStyle="bold" />
         </LinearLayout>

         <LinearLayout
             android:id="@+id/ll_address"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:gravity="center"
            android:orientation="vertical" >

             <ImageView
                 android:id="@+id/iv_address"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:src="@drawable/lightyellow24x24" />

             <TextView
                 android:id="@+id/tv_address"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="3dp"
                 android:text="@string/ins_home2"
                 android:textColor="#1B940A"
                 android:textStyle="bold" />
         </LinearLayout>

         <LinearLayout
            android:id="@+id/ll_friend"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:gravity="center"
             android:orientation="vertical" >

            <ImageView
                android:id="@+id/iv_friend"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:src="@drawable/red24x24" />

             <TextView
                 android:id="@+id/tv_friend"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                 android:text="@string/ins_home3"
                 android:textColor="#1B940A"
                 android:textStyle="bold" />
        </LinearLayout>

         <LinearLayout
             android:id="@+id/ll_setting"
             android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

             <ImageView
                android:id="@+id/iv_setting"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/green24x24" />

             <TextView
                android:id="@+id/tv_setting"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 android:layout_marginTop="3dp"
                 android:text="@string/ins_home4"
                 android:textColor="#1B940A"
                 android:textStyle="bold" />
         </LinearLayout>

     </LinearLayout>

布局效果图

在设置顶部标题布局文件：

先上代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:background="@drawable/register_signout_background">
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="主题"
            android:textSize="20dp"
            android:textColor="#ffffff"/>

</RelativeLayout>

然后我们再将这两个布局文件导入到主界面

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

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

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

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

     </LinearLayout>

然后、看效果：

滑动界面内容：page1

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

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="我是首页哈哈哈哈"
            android:textSize="30dp" />

     </RelativeLayout>

效果：

好的，，现在静态页面已经做出来了，那么怎么使4个菜单能滑动起来呢？

所以我们自定义一个viewPager类

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;
import java.util.Objects;

/**
 * Created by gongliang on 16/1/10.
 */
public class instal_page_adapter extends PagerAdapter {
    private List<View> views;
    public instal_page_adapter(List<View >views){
        this.views = views;
    }
    @Override

    public int getCount() {
        return views.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }

    public Object instantiateItem(ViewGroup container,int position){
        View view = views.get(position);
        container.addView(view);
        return view;
    }
    public void destroyItem(ViewGroup container,int position,Object object)
    {
        container.removeView(views.get(position));
    }
}

最后在Activity写实现逻辑和点击事件方法

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import org.w3c.dom.Text;

import java.security.PrivateKey;
import java.util.ArrayList;
import java.util.List;

public class main_instalment extends AppCompatActivity implements View.OnClickListener,ViewPager.OnPageChangeListener{
    private LinearLayout ll_home;
    private LinearLayout ll_address;
    private LinearLayout ll_friend;
    private LinearLayout ll_setting;

    private ImageView iv_home;
    private ImageView iv_address;
    private ImageView iv_friend;
    private ImageView iv_setting;

    private TextView tv_home;
    private TextView tv_address;
    private TextView tv_friend;
    private TextView tv_setting;

    private ViewPager viewPager;
//    ViewPager适配器ContentAdapterd
    private  instal_page_adapter adapter;
    private List<View>views;

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

        initEvent();
    }

    private void initEvent(){
//        设置按钮监听
        ll_home.setOnClickListener(this);
        ll_address.setOnClickListener(this);
        ll_friend.setOnClickListener(this);
        ll_setting.setOnClickListener(this);
//        设置viewPager滑动监听
        viewPager.setOnPageChangeListener(this);
    }
    public  void  initView(){
//        底部菜单4个LinearLayout
        this.ll_home = (LinearLayout) findViewById(R.id.ll_home);
        this.ll_address = (LinearLayout) findViewById(R.id.ll_address);
        this.ll_friend = (LinearLayout)findViewById(R.id.ll_friend);
        this.ll_setting = (LinearLayout)findViewById(R.id.ll_setting);
//        底部菜单4个ImageView
        this.iv_home = (ImageView)findViewById(R.id.iv_home);
        this.iv_address = (ImageView)findViewById(R.id.iv_address);
        this.iv_friend = (ImageView)findViewById(R.id.iv_friend);
        this.iv_setting = (ImageView)findViewById(R.id.iv_setting);

        this.tv_home = (TextView)findViewById(R.id.tv_home);
        this.tv_address = (TextView)findViewById(R.id.tv_address);
        this.tv_friend = (TextView)findViewById(R.id.tv_friend);
        this.tv_setting = (TextView)findViewById(R.id.tv_setting);
//        中间ViewPager
        this.viewPager = (ViewPager)findViewById(R.id.vp_content);
//        适配器
        View page_01 = View.inflate(main_instalment.this,R.layout.instal_page01,null);
        View page_02 = View.inflate(main_instalment.this,R.layout.instal_page01,null);
        View page_03 = View.inflate(main_instalment.this,R.layout.instal_page01,null);
        View page_04 = View.inflate(main_instalment.this,R.layout.instal_page01,null);

        views = new ArrayList<View>();
        views.add(page_01);
        views.add(page_02);
        views.add(page_03);
        views.add(page_04);

        this.adapter = new instal_page_adapter(views);
        viewPager.setAdapter(adapter);



    }

    @Override
    public void onClick(View v) {
//        在每次点击后将所有的底部按钮 颜色改为灰色，然后根据点击着色
        restartBotton();
//        ImageView和TextView设置为绿色，页面随之跳转
        switch (v.getId()){
            case R.id.ll_home:
                iv_home.setImageResource(R.drawable.green24x24);
                tv_home.setTextColor(0xff1B940A);
                viewPager.setCurrentItem(0);
                break;
            case R.id.ll_address:
                iv_address.setImageResource(R.drawable.lightyellow24x24);
                tv_address.setTextColor(0xff1B940A);
                viewPager.setCurrentItem(1);
            case R.id.ll_friend:
                iv_friend.setImageResource(R.drawable.green24x24);
                tv_friend.setTextColor(0xff1B940A);
                viewPager.setCurrentItem(2);
                break;
            case R.id.ll_setting:
                iv_setting.setImageResource(R.drawable.lightyellow24x24);
                tv_setting.setTextColor(0xff1B940A);
                viewPager.setCurrentItem(3);
            default:
                break;

        }



    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        restartBotton();
//        当前view被选择的时候，改变底部菜单图片，文字颜色
        switch (position){
            case 0:
                iv_home.setImageResource(R.drawable.lightyellow24x24);
                tv_home.setTextColor(0xff1B940A);
            case 1:
                iv_address.setImageResource(R.drawable.green24x24);
                tv_address.setTextColor(0xff1B940A);
            case 2:
                iv_friend.setImageResource(R.drawable.lightyellow24x24);
                tv_friend.setTextColor(0xff1B940A);
            case 3:
                iv_setting.setImageResource(R.drawable.lightyellow24x24);
                tv_setting.setTextColor(0xff1B940A);
            default:
                    break;
        }

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
    private  void  restartBotton(){
//        ImageView 置为灰色
        iv_home.setImageResource(R.drawable.red24x24);
        iv_address.setImageResource(R.drawable.red24x24);
        iv_friend.setImageResource(R.drawable.red24x24);
        iv_setting.setImageResource(R.drawable.red24x24);

//        TextView设置为白色
        tv_home.setTextColor(0xffff22ff);
        tv_address.setTextColor(0xffff22ff);
        tv_friend.setTextColor(0xffff22ff);
        tv_setting.setTextColor(0xffff22ff);



    }
}

最后效果如下：