转载：LinearLayout+Fragment实现下导航栏效果

最新推荐文章于 2024-04-24 21:44:27 发布

老K丨说职场聊副业

最新推荐文章于 2024-04-24 21:44:27 发布

阅读量297

点赞数

分类专栏： # Android开发自定义组件文章标签： android 底部导航栏

原文链接：https://blog.csdn.net/tiandixuanwuliang/article/details/56279956

版权

Android开发自定义组件专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了如何使用LinearLayout和Fragment在Android应用中创建下拉导航栏的效果，包括布局设置、按钮点击事件处理以及初始页面加载时的Fragment替换。通过这个案例，开发者可以快速实现导航栏功能，无需额外的库或复杂的代码。

摘要由CSDN通过智能技术生成

原文出处

标题：LinearLayout+Fragment实现下导航栏效果

作者：天地炫舞

原文链接：LinearLayout+Fragment实现下导航栏效果_天地炫舞的博客-CSDN博客

前言

本文将利用LinearLayout+Fragment实现下导航栏效果

手机APP开发者可以直接在本测试案例上进行二次开发，可以节省自己手动写导航栏的时间和精力。

实现原理：

先使用在MainActivity中使用LinearLayout做出下导航栏的布局效果；

再实现各个按钮的点击事件，替换掉MainActivity对应的xml文件中的Fragment；

优化部分：1、页面一加载时就要替换index的fragment；2、按钮被点击了，在xml文件中改变当前按钮的状态。

效果图如下：

下面开始介绍本测试案例。

一、以下是项目工程截图

二、com.wllfengshu.share中的MainActivity.java为程序入口

java代码如下

package com.wllfengshu.share;
 
import com.wllfengshu.donate.DonateFragment;
import com.wllfengshu.donate.R;
import com.wllfengshu.index.IndexFragment;
import com.wllfengshu.me.MeFragment;
import com.wllfengshu.query.QueryFragment;
 
import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
 
public class MainActivity extends Activity implements OnClickListener {
 
	private LinearLayout llIndex, llDonate, llQuery, llMe;
	private ImageView ivIndex, ivDonate, ivQuery, ivMe, ivCurrent;
	private TextView tvIndex, tvDonate, tvQuery, tvMe, tvCurrent;
	private FragmentManager fragmentManager;
	private FragmentTransaction beginTransaction;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		// 浠ヤ笅鏄垵濮嬪寲start
		llIndex = (LinearLayout) findViewById(R.id.llIndex);
		llDonate = (LinearLayout) findViewById(R.id.llDonate);
		llQuery = (LinearLayout) findViewById(R.id.llQuery);
		llMe = (LinearLayout) findViewById(R.id.llMe);
 
		llIndex.setOnClickListener(this);
		llDonate.setOnClickListener(this);
		llQuery.setOnClickListener(this);
		llMe.setOnClickListener(this);
 
		ivIndex = (ImageView) findViewById(R.id.ivIndex);
		ivDonate = (ImageView) findViewById(R.id.ivDonate);
		ivQuery = (ImageView) findViewById(R.id.ivQuery);
		ivMe = (ImageView) findViewById(R.id.ivMe);
 
		tvIndex = (TextView) findViewById(R.id.tvIndex);
		tvDonate = (TextView) findViewById(R.id.tvDonate);
		tvQuery = (TextView) findViewById(R.id.tvQuery);
		tvMe = (TextView) findViewById(R.id.tvMe);
 
		ivIndex.setSelected(true);
		tvIndex.setSelected(true);
		ivCurrent = ivIndex;
		tvCurrent = tvIndex;
		// 浠ヤ笅鏄垵濮嬪寲end
		
		fragmentManager = getFragmentManager();
		beginTransaction = fragmentManager.beginTransaction();
		beginTransaction.replace(R.id.ll_main, new IndexFragment());
		beginTransaction.commit();
	}
 
	@Override
	public void onClick(View v) {
		ivCurrent.setSelected(false);
		tvCurrent.setSelected(false);
		FragmentManager fragmentManager = getFragmentManager();
		FragmentTransaction beginTransaction = fragmentManager
				.beginTransaction();
		switch (v.getId()) {
		case R.id.llIndex:
			beginTransaction.replace(R.id.ll_main, new IndexFragment());
		case 0:
			ivIndex.setSelected(true);
			ivCurrent = ivIndex;
			tvIndex.setSelected(true);
			tvCurrent = tvIndex;
			break;
		case R.id.llDonate:
			beginTransaction.replace(R.id.ll_main, new DonateFragment());
		case 1:
			ivDonate.setSelected(true);
			ivCurrent = ivDonate;
			tvDonate.setSelected(true);
			tvCurrent = tvDonate;
			break;
		case R.id.llQuery:
			beginTransaction.replace(R.id.ll_main, new QueryFragment());
		case 2:
			ivQuery.setSelected(true);
			ivCurrent = ivQuery;
			tvQuery.setSelected(true);
			tvCurrent = tvQuery;
			break;
		case R.id.llMe:
			beginTransaction.replace(R.id.ll_main, new MeFragment());
		case 3:
			ivMe.setSelected(true);
			ivCurrent = ivMe;
			tvMe.setSelected(true);
			tvCurrent = tvMe;
			break;
		default:
			break;
		}
		beginTransaction.commit();
	}
 
}

其对应的xml文件代码如下

<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:orientation="vertical" >
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="#0E6DB0"
        android:gravity="center"
        android:orientation="vertical" >
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/app_name"
            android:textColor="#ffffff"
            android:textSize="20sp"
            android:textStyle="bold" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/ll_main"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical" >
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#0E6DB0"
        android:orientation="horizontal" >
 
        <LinearLayout
            android:id="@+id/llIndex"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >
 
            <ImageView
                android:id="@+id/ivIndex"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/tab_index" />
 
            <TextView
                android:id="@+id/tvIndex"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="首页"
                android:textColor="@drawable/tab_textview" />
        </LinearLayout>
 
        <LinearLayout
            android:id="@+id/llDonate"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >
 
            <ImageView
                android:id="@+id/ivDonate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/tab_donate" />
 
            <TextView
                android:id="@+id/tvDonate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="捐赠"
                android:textColor="@drawable/tab_textview" />
        </LinearLayout>
 
        <LinearLayout
            android:id="@+id/llQuery"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >
 
            <ImageView
                android:id="@+id/ivQuery"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/tab_query" />
 
            <TextView
                android:id="@+id/tvQuery"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="查询"
                android:textColor="@drawable/tab_textview" />
        </LinearLayout>
 
        <LinearLayout
            android:id="@+id/llMe"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >
 
            <ImageView
                android:id="@+id/ivMe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#00000000"
                android:src="@drawable/tab_me" />
 
            <TextView
                android:id="@+id/tvMe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我"
                android:textColor="@drawable/tab_textview" />
        </LinearLayout>
    </LinearLayout>
 
</LinearLayout>

三、index页面中

java代码如下

package com.wllfengshu.index;
 
import com.wllfengshu.donate.R;
 
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class IndexFragment extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		
		View view=inflater.inflate(R.layout.index_fragment, null);
		return view;
	}
}

其对应的xml文件代码如下

<?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="match_parent"
    	android:layout_height="match_parent"
    	android:text="我是index"/>
</RelativeLayout>