转载请注明出处:Fragment实现Tab/模仿微信界面_Mr_Leixiansheng的博客-CSDN博客
推荐关联文章: ViewPager实现Tab/模仿微信界面
推荐关联文章:ViewPager+FragmentPagerAdapter实现Tab/模仿微信界面(推荐使用)
步骤:
1、新建4个继承Fragment的类和4个布局,分别将布局添加到新建的类中
2、初始化、设置监听、开启事务
3、按键监听中显示对应的Fragment
代码如下:
1、设置好4个Fragment碎片(4个相似,只贴出一个碎片步骤)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:text="第一页"
android:textSize="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
package com.example.leixiansheng.weixin2.fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.leixiansheng.weixin2.R;
/**
* Created by Leixiansheng on 2017/3/30.
*/
public class MesFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.view_1, container, false);
}
}
2、主界面布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.leixiansheng.weixin2.MainActivity">
<include layout="@layout/top"/>
<FrameLayout
android:id="@+id/fragment_container"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<include layout="@layout/bottom"/>
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#000000">
<LinearLayout
android:gravity="center"
android:layout_margin="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/icon"
android:src="@drawable/actionbar_icon"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:id="@+id/title"
android:text="微信"
android:textSize="20dp"
android:textColor="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="@drawable/actionbar_search_icon"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageView
android:src="@drawable/actionbar_add_icon"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageView
android:src="@drawable/actionbar_more_icon"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:background="#000000">
<LinearLayout
android:id="@+id/mes"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/mes_imag"
android:src="@drawable/tab_weixin_pressed"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:textColor="#ffffffff"
android:text="消息"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/friend"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/friend_imag"
android:src="@drawable/tab_find_frd_normal"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:textColor="#ffffffff"
android:text="朋友"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/address"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/address_imag"
android:src="@drawable/tab_address_normal"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:text="联系人"
android:textColor="#ffffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="@+id/setting"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/setting_imag"
android:src="@drawable/tab_settings_normal"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:text="设置"
android:textColor="#ffffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
3、主程序实现功能(初始化、设置监听、开启事务···)
package com.example.leixiansheng.weixin2;
import android.os.Bundle;
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.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.example.leixiansheng.weixin2.fragment.AddressFragment;
import com.example.leixiansheng.weixin2.fragment.FriendFragment;
import com.example.leixiansheng.weixin2.fragment.MesFragment;
import com.example.leixiansheng.weixin2.fragment.SettingFragment;
/**
* Fragment 实现 Tab (推荐使用,但不具有滑动功能。想要有滑动功能可以使用 ViewPager + FragmentPagerAdapter)
*/
public class MainActivity extends FragmentActivity implements View.OnClickListener {
private LinearLayout mes;
private LinearLayout friend;
private LinearLayout address;
private LinearLayout setting;
private ImageView mesImag;
private ImageView friendImag;
private ImageView addressImag;
private ImageView settingImag;
private MesFragment mesFragment;
private FriendFragment friendFragment;
private AddressFragment addressFragment;
private SettingFragment settingFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
init();
initClick();
setSelect(0);
}
//初始化元素
private void init() {
mes = (LinearLayout) findViewById(R.id.mes);
friend = (LinearLayout) findViewById(R.id.friend);
address = (LinearLayout) findViewById(R.id.address);
setting = (LinearLayout) findViewById(R.id.setting);
mesImag = (ImageView) findViewById(R.id.mes_imag);
friendImag = (ImageView) findViewById(R.id.friend_imag);
addressImag = (ImageView) findViewById(R.id.address_imag);
settingImag = (ImageView) findViewById(R.id.setting_imag);
}
//初始化监听
private void initClick() {
mes.setOnClickListener(this);
friend.setOnClickListener(this);
address.setOnClickListener(this);
setting.setOnClickListener(this);
}
@Override
public void onClick(View view) {
resetImages();
switch (view.getId()) {
case R.id.mes:
setSelect(0);
break;
case R.id.friend:
setSelect(1);
break;
case R.id.address:
setSelect(2);
break;
case R.id.setting:
setSelect(3);
break;
}
}
//全部图片设为暗色
private void resetImages() {
mesImag.setImageResource(R.drawable.tab_weixin_normal);
friendImag.setImageResource(R.drawable.tab_find_frd_normal);
addressImag.setImageResource(R.drawable.tab_address_normal);
settingImag.setImageResource(R.drawable.tab_settings_normal);
}
//点亮选中图片,显示对应Fragment页面
private void setSelect(int i) {
FragmentManager manager = getSupportFragmentManager();
FragmentTransaction transaction = manager.beginTransaction();
hideFragment(transaction);
switch (i) {
case 0:
if (mesFragment == null) {
mesFragment = new MesFragment();
transaction.add(R.id.fragment_container, mesFragment);
} else {
transaction.show(mesFragment);
}
mesImag.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
if (friendFragment == null) {
friendFragment = new FriendFragment();
transaction.add(R.id.fragment_container, friendFragment);
} else {
transaction.show(friendFragment);
}
friendImag.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
if (addressFragment == null) {
addressFragment = new AddressFragment();
transaction.add(R.id.fragment_container, addressFragment);
} else {
transaction.show(addressFragment);
}
addressImag.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
if (settingFragment == null) {
settingFragment = new SettingFragment();
transaction.add(R.id.fragment_container, settingFragment);
} else {
transaction.show(settingFragment);
}
settingImag.setImageResource(R.drawable.tab_settings_pressed);
break;
}
transaction.commit();
}
//隐藏所有Fragment
private void hideFragment(FragmentTransaction transaction) {
if (mesFragment != null) {
transaction.hide(mesFragment);
}
if (friendFragment != null) {
transaction.hide(friendFragment);
}
if (addressFragment != null) {
transaction.hide(addressFragment);
}
if (settingFragment != null) {
transaction.hide(settingFragment);
}
}
}