利用FrameLayout+LinearLayout实现Android底部导航栏切换

2019/08/14 11:03
阅读数 70

  实现底部导航栏的方式有很多种,此处我只是采用了其中一种,其余的方法可自行百度去查询。

效果图展示

一、布局文件内容

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >
    </FrameLayout>

    <LinearLayout
        android:id="@+id/group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            >

            <ImageView
                android:id="@+id/iv_sy"
                android:layout_width="25dp"
                android:layout_height="23dp"
                android:background="@mipmap/sy_yes"
                android:button="@null"
                android:clickable="true" />

            <TextView
                android:id="@+id/tx_sy"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="首页"
                android:textColor="#e70a0a"
                />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center">

            <ImageView
                android:id="@+id/lv"
                android:layout_width="25dp"
                android:layout_height="23dp"
                android:background="@mipmap/lv_no"
                android:button="@null"
                android:clickable="true" />
            <TextView
                android:id="@+id/tx_lv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="5dp"
                android:gravity="center"
                android:text="我的履职" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center">

            <ImageView
                android:id="@+id/iv_advice"
                android:layout_width="25dp"
                android:layout_height="23dp"
                android:background="@mipmap/advice_no"
                android:button="@null"
                android:clickable="true" />
            <TextView
                android:id="@+id/tx_advice"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_marginTop="5dp"
                android:text="我的建议"
                />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center">

            <ImageView
                android:id="@+id/meet"
                android:layout_width="25dp"
                android:layout_height="23dp"
                android:background="@mipmap/meet_no"
                android:button="@null"
                android:clickable="true" />
            <TextView
                android:id="@+id/tx_meet"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_marginTop="5dp"
                android:text="会议文件" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:visibility="gone"
            android:gravity="center">

            <ImageView
                android:id="@+id/center"
                android:layout_width="25dp"
                android:layout_height="23dp"
                android:background="@mipmap/center_no"
                android:button="@null"
                android:clickable="true" />
            <TextView
                android:id="@+id/tx_center"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="个人中心" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

提示:最外层应使用LinearLayout,不然android:layout_height="0dp"和android:layout_weight="1"属性不起作用,这2个属性联合使用作用是使用界面上剩余的空间

二、主文件代码

package com.example.administrator.myapplication;

import android.graphics.Color;
import android.net.Uri;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.administrator.myapplication.fragment.AdviceFragment;
import com.example.administrator.myapplication.fragment.CenterFragment;
import com.example.administrator.myapplication.fragment.LzFragment;
import com.example.administrator.myapplication.fragment.MeetFragment;
import com.example.administrator.myapplication.fragment.SyFragment;

import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.Properties;

public class MainActivity extends AppCompatActivity {
    private ImageView[] imageList;
    private TextView[] text;
    private ImageView sy,advice,lv,meet,center;
    private TextView  tx_sy,tx_advice,tx_lv,tx_meet,tx_center;
    private int curIndex = 0;//当前点击的位置
    //图片默认样式集合
    private int[] seIds = {R.mipmap.sy_no,R.mipmap.advice_no,R.mipmap.lv_no,R.mipmap.meet_no,R.mipmap.center_no};
    //图片选中样式集合
    private int[] noseIds = {R.mipmap.sy_yes,R.mipmap.advice_ok,R.mipmap.lv_yes,R.mipmap.meet_yes,R.mipmap.center_ok};


    private Fragment fragment;//当前fragment
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getAllView();
        setListener();
        getSupportFragmentManager().beginTransaction().add(R.id.fl_content, new SyFragment()).commit();
    }

    public void getAllView() {
        sy = (ImageView)findViewById(R.id.iv_sy);
        advice = (ImageView)findViewById(R.id.iv_advice);
        lv = (ImageView)findViewById(R.id.lv);
        meet = (ImageView)findViewById(R.id.meet);
        center = (ImageView)findViewById(R.id.center);
        tx_sy = (TextView)findViewById(R.id.tx_sy);
        tx_advice = (TextView)findViewById(R.id.tx_advice);
        tx_lv = (TextView)findViewById(R.id.tx_lv);
        tx_meet = (TextView)findViewById(R.id.tx_meet);
        tx_center = (TextView)findViewById(R.id.tx_center);
        imageList = new ImageView[]{sy,advice,lv,meet,center};
        text = new TextView[]{tx_sy,tx_advice,tx_lv,tx_meet,tx_center};
    }

    public void setListener() {
        View.OnClickListener listener = new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                switch (v.getId()) {
                    case R.id.iv_sy:
                        curIndex = 0;
                        fragment = new SyFragment();    //首页
                        break;
                    case R.id.lv:
                        curIndex = 2;
                        fragment = new LzFragment();    //履职
                        break;
                    case R.id.iv_advice:
                        curIndex = 1;
                        fragment = new AdviceFragment();    //建议
                        break;
                    case R.id.meet:
                        curIndex = 3;
                        fragment = new MeetFragment();  //会议文件
                        break;
                    case R.id.center:
                        curIndex = 4;
                        fragment = new CenterFragment();
                        break;
                }
                for (int i = 0; i < imageList.length; i++) {
                    ImageView imageView = imageList[i];
                    //当前图片选中,并且其他设置为默认样式
                    imageView.setBackgroundResource(seIds[i]);
                    text[i].setTextColor(Color.parseColor("#636161"));
                    if (i == curIndex) {
                        imageView.setBackgroundResource(noseIds[i]);
                        text[i].setTextColor(Color.parseColor("#e70a0a"));
                    }
                }
                getSupportFragmentManager().beginTransaction().replace(R.id.fl_content, fragment).commit();
            }
        };
        sy.setOnClickListener(listener);
        advice.setOnClickListener(listener);
        lv.setOnClickListener(listener);
        meet.setOnClickListener(listener);
        center.setOnClickListener(listener);
    }

}

三、Fragment代码

package com.example.administrator.myapplication.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.administrator.myapplication.R;


public class LzFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        View v = LayoutInflater.from(this.getActivity()).inflate(R.layout.lz_layout, null);
        return v;
    }

}

四、layout文件

<?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="wrap_content">
   <TextView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:text="我爱你"
       android:gravity="center"
       android:textColor="#283784"
       />
</RelativeLayout>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部