投稿
  1. 极客之音首页
  2. 后端开发
  3. Python

Fragment笔记（3）仿微信底部菜单栏

飞熊 • • Python • 阅读 72

有目标就不怕路远。年轻人．无论你现在身在何方．重要的是你将要向何处去。只有明确的目标才能助你成功。没有目标的航船．任何方向的风对他来说都是逆风。因此，再遥远的旅程，只要有目标．就不怕路远。没有目标，哪来的劲头？一车尔尼雷夫斯基

导读：本篇文章讲解 Fragment笔记（3）仿微信底部菜单栏，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

我们今天来实现一个功能关于微信的底部菜单栏使用Fragment来实现这个功能。
老样子代码给出在github上：https://github.com/307572384/Fragment
在这里插入图片描述
具体功能就如gif图所示。
我们先写fragment的布局
f_wx_fragment_1.xml
这里布局就非常简单主要是为了方便显示出来。颜色那个自己写就行方便自己去辨认

<?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:background="@color/yellow_f">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="这里是Fragment1"/>
</LinearLayout>

f_wx_fragment_2.xml

<?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:background="@color/gray">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这里是Fragment2"/>
</LinearLayout>

f_wx_fragment_3.xml

<?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:background="@color/black_c">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这里是Fragment3"/>

</LinearLayout>

f_wx_fragment_4.xml

<?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:background="@color/cyan">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这里是Fragment4"/>

</LinearLayout>

下面写activity的layout
f_wx_fragment_main.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">
    <FrameLayout
        android:id="@+id/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/bottomArea"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:background="#FFFFFF" >
    </FrameLayout>
    <RelativeLayout
        android:id="@+id/bottomArea"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        >

        <!-- tab的分割线 -->
        <ImageView
            android:id="@+id/tabTop"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#B6B6B6" />


        <!-- tab的四个按钮 -->
        <LinearLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/tabTop"
            android:layout_marginTop="1dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal" >

            <!-- 微信按钮 -->
            <!-- 使用FrameLayout，最主要的原因是使用它可以很容易的再添加一个消息提醒的小图片 -->
            <FrameLayout
                android:id="@+id/weixinLayout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:paddingTop="3dp"
                android:paddingBottom="2dp">

                <ImageView
                    android:id="@+id/weixinImageView"
                    android:layout_width="48px"
                    android:layout_height="48px"
                    android:layout_gravity="top|center"
                    android:src="@drawable/ic_1" />

                <TextView
                    android:id="@+id/weixinTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/weixin"
                    android:textColor="#45C01A"
                    android:layout_gravity="bottom|center"
                    android:textSize="13sp" />
            </FrameLayout>

            <!-- 联系人按钮 -->
            <FrameLayout
                android:id="@+id/contractLayout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:paddingTop="3dp"
                android:paddingBottom="2dp">

                <ImageView
                    android:id="@+id/contractImageView"
                    android:layout_width="48px"
                    android:layout_height="48px"
                    android:layout_gravity="top|center"
                    android:src="@drawable/ic_2" />

                <TextView
                    android:id="@+id/contractTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/contract"
                    android:textColor="#999999"
                    android:layout_gravity="bottom|center"
                    android:textSize="13sp" />
            </FrameLayout>

            <!-- 发现按钮 -->
            <FrameLayout
                android:id="@+id/findLayout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:paddingTop="3dp"
                android:paddingBottom="2dp">

                <ImageView
                    android:id="@+id/findImageView"
                    android:layout_width="48px"
                    android:layout_height="48px"
                    android:layout_gravity="top|center"
                    android:src="@drawable/ic_3" />

                <TextView
                    android:id="@+id/findTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/find"
                    android:textColor="#999999"
                    android:layout_gravity="bottom|center"
                    android:textSize="13sp" />
            </FrameLayout>

            <!-- 我按钮 -->
            <FrameLayout
                android:id="@+id/meLayout"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:paddingTop="3dp"
                android:paddingBottom="2dp">

                <ImageView
                    android:id="@+id/meImageView"
                    android:layout_width="48px"
                    android:layout_height="48px"
                    android:layout_gravity="top|center"
                    android:src="@drawable/ic_4" />

                <TextView
                    android:id="@+id/meTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/me"
                    android:textColor="#999999"
                    android:layout_gravity="bottom|center"
                    android:textSize="13sp" />
            </FrameLayout>
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

我们再来看看Fragment的怎么写的
F_WXFragment_1

package com.beta.fragment.Fragment;

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

import com.beta.fragment.R;

/**
 * Created by Kevein on 2019/1/26.12:18
 */
//这里是微信Fragment
public class F_WXFragment_1 extends Fragment {
	@Nullable
	@Override
	//这里非常简单就只要去绑定fragment的layout即可
	public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
		View weixiView = inflater.inflate(R.layout.f_wx_fragment_1,container,false);
		return weixiView;
	}
}

F_WXFragment_2

package com.beta.fragment.Fragment;

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

import com.beta.fragment.R;

/**
 * Created by Kevein on 2019/1/26.12:18
 */
//这里是联系人
public class F_WXFragment_2 extends Fragment{
	@Nullable
	@Override
	public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
		View lxrView = inflater.inflate(R.layout.f_wx_fragment_2,container,false);
		return lxrView;
	}
}

F_WXFragment_3

package com.beta.fragment.Fragment;

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

import com.beta.fragment.R;

/**
 * Created by Kevein on 2019/1/26.12:18
 */
//这里是发现Fragment
public class F_WXFragment_3 extends Fragment{
	@Nullable
	@Override
	public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
		View findView = inflater.inflate(R.layout.f_wx_fragment_3,container,false);
		return findView;
	}
}

F_WXFragment_4

package com.beta.fragment.Fragment;

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

import com.beta.fragment.R;

/**
 * Created by Kevein on 2019/1/26.12:18
 */
//这里是我Fragment
public class F_WXFragment_4 extends Fragment {
	@Nullable
	@Override
	public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
		View meView = inflater.inflate(R.layout.f_wx_fragment_4,container,false);
		return meView;
	}
}

最后我们再来看看如何在Activity中去让fragment去显示出来
FWXActivity

package com.beta.fragment.Activity;

import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

import com.beta.fragment.Fragment.F_WXFragment_1;
import com.beta.fragment.Fragment.F_WXFragment_2;
import com.beta.fragment.Fragment.F_WXFragment_3;
import com.beta.fragment.Fragment.F_WXFragment_4;
import com.beta.fragment.R;

//仿微信底部菜单栏的Fragment
public class FWXActivity extends Activity implements View.OnClickListener{
	//定位Fragment
	private Fragment weixinFragment   = new F_WXFragment_1();
	private Fragment contractFragment = new F_WXFragment_2();
	private Fragment findFragment     = new F_WXFragment_3();
	private Fragment meFragment       = new F_WXFragment_4();

	// tab中的四个帧布局
	private FrameLayout findFrameLayout, meFrameLayout, contractFrameLayout, weixinFrameLayout;

	// tab中的四个帧布局中的四个图片组件
	private ImageView findImageView, meImageView, contractImageView,weixinImageView;

	// tab中的四个帧布局中的四个图片对应文字
	private TextView findTextView, meTextView, contractTextView,weixinTextView;

	@Override
	protected void onCreate(@Nullable Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.f_wx_fragment_main);
		// 初始化组件
		initView();

		// 初始化按钮单击事件
		initClickEvent();

		// 初始化所有fragment
		initFragment();

	}
	//初始化所有的Fragment
	private void initFragment()
	{
		FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();
		if(!weixinFragment.isAdded())
		{
			fragmentTransaction.add(R.id.content,weixinFragment);
			fragmentTransaction.hide(weixinFragment);
		}
		if(!contractFragment.isAdded())
		{
			fragmentTransaction.add(R.id.content,contractFragment);
			fragmentTransaction.hide(contractFragment);
		}
		if(!findFragment.isAdded())
		{
			fragmentTransaction.add(R.id.content,findFragment);
			fragmentTransaction.hide(findFragment);

		}
		if(!meFragment.isAdded())
		{
			fragmentTransaction.add(R.id.content,meFragment);
			fragmentTransaction.hide(meFragment);
		}
		hideAllFragment(fragmentTransaction);
		// 默认显示第一个fragment
		fragmentTransaction.show(weixinFragment);
		fragmentTransaction.commit();
	}
	/**
	 * 隐藏所有fragment
	 *
	 * @param fragmentTransaction
	 */
	private void hideAllFragment(FragmentTransaction fragmentTransaction) {
		fragmentTransaction.hide(weixinFragment);
		fragmentTransaction.hide(contractFragment);
		fragmentTransaction.hide(findFragment);
		fragmentTransaction.hide(meFragment);
	}
	private void initClickEvent() {
		findFrameLayout.setOnClickListener(this);
		meFrameLayout.setOnClickListener(this);
		contractFrameLayout.setOnClickListener(this);
		weixinFrameLayout.setOnClickListener(this);
	}
	//初始化组件
	private void initView() {
		findFrameLayout = (FrameLayout) findViewById(R.id.findLayout);
		meFrameLayout = (FrameLayout) findViewById(R.id.meLayout);
		contractFrameLayout = (FrameLayout) findViewById(R.id.contractLayout);
		weixinFrameLayout = (FrameLayout) findViewById(R.id.weixinLayout);

		findImageView = (ImageView) findViewById(R.id.findImageView);
		meImageView = (ImageView) findViewById(R.id.meImageView);
		contractImageView = (ImageView) findViewById(R.id.contractImageView);
		weixinImageView = (ImageView) findViewById(R.id.weixinImageView);

		findTextView = (TextView) findViewById(R.id.findTextView);
		meTextView = (TextView) findViewById(R.id.meTextView);
		contractTextView = (TextView) findViewById(R.id.contractTextView);
		weixinTextView = (TextView) findViewById(R.id.weixinTextView);
	}

	@Override
	public void onClick(View v) {
				switch (v.getId())
				{
					case R.id.weixinLayout:
						// 点击微信tab
						clickTab(weixinFragment);
						break;

					case R.id.contractLayout:
						// 点击联系人tab
						clickTab(contractFragment);
						break;

					case R.id.findLayout:
						// 点击发现tab
						clickTab(findFragment);
						break;

					case R.id.meLayout:
						// 点击我tab
						clickTab(meFragment);
						break;

					default:
						break;
				}
	}

	/**
	 * 点击下面的Tab按钮
	 *
	 * @param tabFragment
	 */
	private void clickTab(Fragment tabFragment)
	{
		//清除上次选中状态
		clearSeleted();

		FragmentTransaction fragmentTransaction = getFragmentManager().beginTransaction();

		//隐藏所有Fragment
		hideAllFragment(fragmentTransaction);
		//显示该Fragment
		fragmentTransaction.show(tabFragment);
		//提交事务
		fragmentTransaction.commit();
		//改变tab的样式设置为选中状态
		changeTabStyle(tabFragment);
	}
	/**
	 * 清除上次选中状态
	 */
	private void clearSeleted() {
		if (!weixinFragment.isHidden()) {
			weixinImageView.setImageResource(R.drawable.ic_1);
			weixinTextView.setTextColor(Color.parseColor("#999999"));
		}

		if (!contractFragment.isHidden()) {
			contractImageView.setImageResource(R.drawable.ic_2);
			contractTextView.setTextColor(Color.parseColor("#999999"));
		}

		if (!findFragment.isHidden()) {
			findImageView.setImageResource(R.drawable.ic_3);
			findTextView.setTextColor(Color.parseColor("#999999"));
		}

		if (!meFragment.isHidden()) {
			meImageView.setImageResource(R.drawable.ic_4);
			meTextView.setTextColor(Color.parseColor("#999999"));
		}
	}
	/**
	 * 根据Fragment的状态改变样式
	 */
	private void changeTabStyle(Fragment tabFragment) {
		if (tabFragment instanceof F_WXFragment_1) {
			weixinImageView.setImageResource(R.drawable.ic_1);
			weixinTextView.setTextColor(Color.parseColor("#45C01A"));
		}

		if (tabFragment instanceof F_WXFragment_2) {
			contractImageView.setImageResource(R.drawable.ic_2);
			contractTextView.setTextColor(Color.parseColor("#45C01A"));
		}

		if (tabFragment instanceof F_WXFragment_3) {
			findImageView.setImageResource(R.drawable.ic_3);
			findTextView.setTextColor(Color.parseColor("#45C01A"));
		}

		if (tabFragment instanceof F_WXFragment_4) {
			meImageView.setImageResource(R.drawable.ic_4);
			meTextView.setTextColor(Color.parseColor("#45C01A"));
		}
	}
}

这里需要注意一下如果需要做一些不一样的样式如点击以后显示的图片不一样可以在Fragment转变样式中去修改他这样就可以让点击以后图片变得不一样给用户更好的体验感。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/134149.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！