Fragment的简单使用一

推荐：

• 普通的 Fragment 的简单使用
• 侧面点击的 Fragment （类似于电商类）

今日写了一个 Fragment 的最基本的使用，效果图如下：

     

下面是主要内容：

• MainActivity 代码和 activity_main 布局文件
• MainFragment 代码 和 fragment_main 布局文件

这是上面效果图的源码&&&

1. MainActivity 代码和 activity_main 布局文件

下面是 MainActivity 的主要代码：

import android.app.Activity;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity implements View.OnClickListener {

    //ll_1,ll_2,ll_3,ll_4分别是首页，发现，消息，我的
    private LinearLayout ll_1, ll_2, ll_3, ll_4;
    private TextView tv_1, tv_2, tv_3, tv_4;
    private MainFragment fg1;
    private MainFragment fg2;
    private MainFragment fg3;
    private MainFragment fg4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //查找控件模拟第一次点击等操作
        setView();
    }

    @Override
    public void onClick(View view) {
        FragmentTransaction fTransaction = getFragmentManager().beginTransaction();
        hideAllFragment(fTransaction);
        switch (view.getId()) {
            //首页
            case R.id.ll_1:
                if (fg1 == null) {
                    fg1 = new MainFragment("首页");
                    fTransaction.add(R.id.fl_context, fg1);
                } else {
                    fTransaction.show(fg1);
                }
                //设置选中的点击效果,1为首页
                setClick("1");
                break;
            //发现
            case R.id.ll_2:
                if (fg2 == null) {
                    fg2 = new MainFragment("发现");
                    fTransaction.add(R.id.fl_context, fg2);
                } else {
                    fTransaction.show(fg2);
                }
                //设置选中的点击效果,2为发现
                setClick("2");
                break;
            //消息
            case R.id.ll_3:
                if (fg3 == null) {
                    fg3 = new MainFragment("消息");
                    fTransaction.add(R.id.fl_context, fg3);
                } else {
                    fTransaction.show(fg3);
                }
                //设置选中的点击效果,3为消息
                setClick("3");
                break;
            //我的
            case R.id.ll_4:
                if (fg4 == null) {
                    fg4 = new MainFragment("我的");
                    fTransaction.add(R.id.fl_context, fg4);
                } else {
                    fTransaction.show(fg4);
                }
                //设置选中的点击效果,4为我的
                setClick("4");
                break;
        }
        //提交事务
        fTransaction.commitAllowingStateLoss();
    }

    //设置选中的点击效果
    private void setClick(String type) {
        tv_1.setTextColor(Color.parseColor("#FF999999"));
        tv_2.setTextColor(Color.parseColor("#FF999999"));
        tv_3.setTextColor(Color.parseColor("#FF999999"));
        tv_4.setTextColor(Color.parseColor("#FF999999"));
        tv_1.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12);
        tv_1.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
        tv_2.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12);
        tv_2.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
        tv_3.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12);
        tv_3.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
        tv_4.setTextSize(TypedValue.COMPLEX_UNIT_SP, 12);
        tv_4.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
        if (type.equals("1")){
            //选中首页，设置字体颜色、大小、加粗；
            tv_1.setTextColor(Color.parseColor("#FF333333"));
            tv_1.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
            tv_1.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
        }else if (type.equals("2")){
            //选中发现，设置字体颜色、大小、加粗；
            tv_2.setTextColor(Color.parseColor("#FF333333"));
            tv_2.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
            tv_2.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
        }else if (type.equals("3")){
            //选中消息，设置字体颜色、大小、加粗；
            tv_3.setTextColor(Color.parseColor("#FF333333"));
            tv_3.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
            tv_3.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
        }else {
            //选中我的，设置字体颜色、大小、加粗；
            tv_4.setTextColor(Color.parseColor("#FF333333"));
            tv_4.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
            tv_4.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
        }
    }

    //隐藏所有Fragment
    private void hideAllFragment(FragmentTransaction fragmentTransaction) {
        if (fg1 != null) fragmentTransaction.hide(fg1);
        if (fg2 != null) fragmentTransaction.hide(fg2);
        if (fg3 != null) fragmentTransaction.hide(fg3);
        if (fg4 != null) fragmentTransaction.hide(fg4);
    }

    //查找控件模拟第一次点击等操作
    private void setView() {
        ll_1 = findViewById(R.id.ll_1);
        ll_2 = findViewById(R.id.ll_2);
        ll_3 = findViewById(R.id.ll_3);
        ll_4 = findViewById(R.id.ll_4);
        tv_1 = findViewById(R.id.tv_1);
        tv_2 = findViewById(R.id.tv_2);
        tv_3 = findViewById(R.id.tv_3);
        tv_4 = findViewById(R.id.tv_4);
        ll_1.setOnClickListener(this);
        ll_2.setOnClickListener(this);
        ll_3.setOnClickListener(this);
        ll_4.setOnClickListener(this);
        //模拟一次点击，既进去后选择第一项
        ll_1.performClick();
    }
}

注意：

• 我在上面导入的是 android.app.Fragment;   不要与  import android.support.v4.app.Fragment;  搞混了。

下面是 activity_main 布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF">

    <FrameLayout
        android:id="@+id/fl_context"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/ll_bottom" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:layout_above="@+id/ll_bottom"
        android:background="#FFEEEE" />

    <LinearLayout
        android:id="@+id/ll_bottom"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

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

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/tv_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="首页"
                android:textColor="#FF333333"
                android:textSize="12dp" />
        </LinearLayout>

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

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/tv_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="发现"
                android:textColor="#FF999999"
                android:textSize="12dp" />
        </LinearLayout>

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

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/tv_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="消息"
                android:textColor="#FF999999"
                android:textSize="12dp" />
        </LinearLayout>

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

            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/tv_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dp"
                android:text="我的"
                android:textColor="#FF999999"
                android:textSize="12dp" />
        </LinearLayout>

    </LinearLayout>
</RelativeLayout>

2. MainFragment 代码 和 fragment_main 布局文件

下面是 MainFragment 中的代码：

import android.annotation.SuppressLint;
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 android.widget.TextView;

@SuppressLint("ValidFragment")
public class MainFragment extends Fragment {
    private View view;
    private String title;
    private TextView tv_text;

    public MainFragment(String title) {
        this.title = title;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = View.inflate(getActivity(),R.layout.fragment_main,null);

        tv_text = view.findViewById(R.id.tv_text);
        tv_text.setText(title);
        return view;
    }
}

要注意的也是要导入的 Fragment 包不要错了。

最后是 fragment_main 布局文件代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/tv_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="#000000"
        android:textSize="20dp"
        android:gravity="center"/>
</LinearLayout>

当写到这个地方，以上效果图的效果便实现了。

这是上面效果图的源码&&&

​​​​​​​

推荐：

• ​​​​​​​普通的 Fragment 的简单使用​​​​​​​​​​​​​​
• 侧面点击的 Fragment （类似于电商类）