推荐:
- 普通的 Fragment 的简单使用
- 侧面点击的 Fragment (类似于电商类)
今日写了一个 Fragment 的最基本的使用,效果图如下:
下面是主要内容:
- MainActivity 代码和 activity_main 布局文件
- MainFragment 代码 和 fragment_main 布局文件
这是上面效果图的源码&&&
github 下载地址:https://github.com/wuqingsen/Fragment
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>
当写到这个地方,以上效果图的效果便实现了。