Fragment

最新推荐文章于 2024-06-26 15:22:32 发布

原创最新推荐文章于 2024-06-26 15:22:32 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Fragment #仿微信底部导航

Android UI 之自定义控件专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了Fragment的使用方法，包括其生命周期、创建步骤以及如何在Android应用中实现仿微信内容的演示。通过创建Fragment、XML布局文件、设置Activity与Fragment的交互，实现了四个Fragment的创建及导航，提供了从入门到实践的完整指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先贴上大神的博客地址，看了之后完全没写下去的欲望了。。。但为了能加深自己的印象，还是写一写。
http://blog.youkuaiyun.com/lmj623565791/article/details/37970961
http://blog.youkuaiyun.com/lmj623565791/article/details/37992017
还有慕课网hyman老师讲的也是很不错的，百度慕课网，搜索课程fragment就可以学习了。下面简要概括一下Fragment的使用方法：
按我的理解，Frament与Activity是类似的，他是一种可以嵌入在活动中的UI片段。Frament也有自己的生命周期和布局，因此创建的步骤与Ativity是类似的。
生命周期：
添加一个碎片–>
onAttach()(碎片与活动关联)–>
onCreate()–>
onCreateView()(碎片加载加载布局时调用)–>
onActivityCreated()(确保与碎片相关联的活动一定已经创建完毕的时候调用)–>
onStart()—>
onResume()–>
碎片已激活–>
onPause()–>
onStop()–>
onDestoryView()(当与碎片关联的视图被移除时调用)–>
onDestory()–>
onDetach()(当碎片与活动解除关联的时候调用)–>
碎片被销毁
下面简单的用hyman讲的仿微信内容演示一下：
首先创建四个碎片（只贴一个，其他三个类似）

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

public class FragmentOne extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View root = inflater.inflate(R.layout.tab01, container, false);
        return root;
    }
}

对应的.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:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is 微信 Fragment"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

四个碎片创建好了，然后是标题栏布局top.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:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is 微信 Fragment"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

底部布局bottom.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="55dp"
    android:background="@drawable/bottom_bar"
    android:baselineAligned="false"
    android:orientation="horizontal" >

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

        <ImageButton
            android:id="@+id/id_img_01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_01_pressed" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff" />
    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_img_02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_03_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            android:textColor="#ffffff" />
    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_img_03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_02_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
            android:textColor="#ffffff" />
    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_img_04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_04_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#ffffff" />
    </LinearLayout>

</LinearLayout>

一定要设置这一项

 android:clickable="false"

如果去掉，响应速度会超级慢。
再然后在activity_main.xml中include进来就好了

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

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

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </FrameLayout>

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

</LinearLayout>

对应的MainActivity.java

package com.android.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

public class MainActivity extends FragmentActivity implements OnClickListener {

    private LinearLayout mTab01;
    private LinearLayout mTab02;
    private LinearLayout mTab03;
    private LinearLayout mTab04;

    private ImageButton mImg01;
    private ImageButton mImg02;
    private ImageButton mImg03;
    private ImageButton mImg04;

    private Fragment mFrament01;
    private Fragment mFrament02;
    private Fragment mFrament03;
    private Fragment mFrament04;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 隐藏系统自带标题栏，加载布局前调用
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        initView();
        initEvent();
        // 默认第一项
        setSelect(0);

    }

    /**
     * 初始化点击事件
     */
    private void initEvent() {
        mTab01.setOnClickListener(this);
        mTab02.setOnClickListener(this);
        mTab03.setOnClickListener(this);
        mTab04.setOnClickListener(this);
    }

    /**
     * 初始化布局
     */
    private void initView() {
        mTab01 = (LinearLayout) findViewById(R.id.id_tab_01);
        mTab02 = (LinearLayout) findViewById(R.id.id_tab_02);
        mTab03 = (LinearLayout) findViewById(R.id.id_tab_03);
        mTab04 = (LinearLayout) findViewById(R.id.id_tab_04);

        mImg01 = (ImageButton) findViewById(R.id.id_img_01);
        mImg02 = (ImageButton) findViewById(R.id.id_img_02);
        mImg03 = (ImageButton) findViewById(R.id.id_img_03);
        mImg04 = (ImageButton) findViewById(R.id.id_img_04);

    }

    /**
     * 判断当前选择的碎片
     * 
     * @param i
     */
    private void setSelect(int i) {
        // 用事务的方式同步碎片和底部按钮的高亮
        FragmentManager fragment = getSupportFragmentManager();
        FragmentTransaction transaction = fragment.beginTransaction();
        hideFragment(transaction);
        // 设置图片为亮色，设置内容区域
        switch (i) {
        case 0:
            if (mFrament01 == null) {
                mFrament01 = new FragmentOne();
                transaction.add(R.id.id_content, mFrament01);
            } else {
                transaction.show(mFrament01);
            }
            mImg01.setImageResource(R.drawable.tab_01_pressed);
            break;
        case 1:
            if (mFrament02 == null) {
                mFrament02 = new FragmentTwo();
                transaction.add(R.id.id_content, mFrament02);
            } else {
                transaction.show(mFrament02);
            }
            mImg02.setImageResource(R.drawable.tab_02_pressed);
            break;
        case 2:
            if (mFrament03 == null) {
                mFrament03 = new FragmentThree();
                transaction.add(R.id.id_content, mFrament03);
            } else {
                transaction.show(mFrament03);
            }
            mImg03.setImageResource(R.drawable.tab_03_pressed);
            break;
        case 3:
            if (mFrament04 == null) {
                mFrament04 = new FragmentFour();
                transaction.add(R.id.id_content, mFrament04);
            } else {
                transaction.show(mFrament04);
            }
            mImg04.setImageResource(R.drawable.tab_04_pressed);
            break;
        default:
            break;
        }
        transaction.commit();
    }

    /**
     * 隐藏碎片
     * 
     * @param transaction
     */
    private void hideFragment(FragmentTransaction transaction) {
        if (mFrament01 != null) {
            transaction.hide(mFrament01);
        }
        if (mFrament02 != null) {
            transaction.hide(mFrament02);
        }
        if (mFrament03 != null) {
            transaction.hide(mFrament03);
        }
        if (mFrament04 != null) {
            transaction.hide(mFrament04);
        }

    }

    @Override
    public void onClick(View v) {
        reSetImgs();
        switch (v.getId()) {
        case R.id.id_tab_01:
            setSelect(0);
            break;
        case R.id.id_tab_02:
            setSelect(1);
            break;
        case R.id.id_tab_03:
            setSelect(2);
            break;
        case R.id.id_tab_04:
            setSelect(3);
            break;

        default:
            break;
        }
    }

    /**
     * 切换图片至暗色
     */
    private void reSetImgs() {
        mImg01.setImageResource(R.drawable.tab_01_normal);
        mImg02.setImageResource(R.drawable.tab_02_normal);
        mImg03.setImageResource(R.drawable.tab_03_normal);
        mImg04.setImageResource(R.drawable.tab_04_normal);

    }
}

根据设备大小自动加载哪个布局（来自郭神的内容）
平板电脑采用双页模式，所以在运行时判断程序使用双页模式还是单页模式，只需要限定符（Qualifiers）就可以实现了。
在res目录下新建一个layout-large文件夹，同样建一个布叫activity_main.xml。里面用多个标签就可以了,最后将MainActivity中的按钮点击事件的代码屏蔽掉。
或者自定义最小宽度限定符，因为上面的限定符没有明确的分割点。在res目录下新建layout-sw600dp，内容跟上面一样，只是明确的说明当程序运行在屏幕宽度大于600dp的设备上时，会加载此布局，否则加载默认的layout布局，需要注意的一点是最小宽度限定符是在Android3.2版本引入的。