zoukankan      html  css  js  c++  java
  • 利用FrameLayout+LinearLayout实现Android底部导航栏切换

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

    效果图展示

    一、布局文件内容

    <?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>
  • 相关阅读:
    iOS开源App整理
    iOS9 3DTouch 之 Home Screen Quick Actions
    UITabbarController & UITabbar 学习
    Linux一些最基础操作
    logo的表现形式
    LOGO设计中出现文字背后的意义
    标志设计中选择合适的字体
    sketch制作LOGO(三) ---大熊猫
    sketch制作LOGO(二) ---樱花婆婆
    十多个app引导页面欣赏
  • 原文地址:https://www.cnblogs.com/zblwyj/p/11350635.html
Copyright © 2011-2022 走看看