现在多数App的首页都是四个Tab或者五个Tab.想实现这种导航栏该怎么做呢?
用过几种方法TabHost+Fragment、RadioGroup+Fragment、
今天写一下另一种方法 Tablayout+Fragment 实现导航栏效果
MainActivity.class
代码如下↓↓
package zhang.guo.qiang.fragmenttabhost.tablayout_fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import org.xutils.view.annotation.ContentView;
import org.xutils.view.annotation.ViewInject;
import org.xutils.x;
import zhang.guo.qiang.R;
/**
* Created by ylwx on 2018/7/28.
*/
public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private Fragment mFragmensts[];
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tablayout_shixian_mainactivity);
mFragmensts = FragmntInflater.getFragments("TabLayout Tab");
initView();
}
private void initView() {
mTabLayout = (TabLayout) findViewById(R.id.bottom_tab_layout);
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
onTabItemSelected(tab.getPosition());
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
View view = mTabLayout.getTabAt(i).getCustomView();
ImageView icon = (ImageView) view.findViewById(R.id.tab_photo);
TextView text = (TextView) view.findViewById(R.id.tab_title);
if (i == tab.getPosition()) { // 选中状态
icon.setImageResource(FragmntInflater.mTabRes[i]);
text.setTextColor(getResources().getColor(android.R.color.black));
} else {
icon.setImageResource(FragmntInflater.mTabResPressed[i]);
text.setTextColor(getResources().getColor(android.R.color.darker_gray));
}
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
// 提供自定义的布局添加Tab
for (int i = 0; i < 4; i++) {
mTabLayout.addTab(mTabLayout.newTab().setCustomView(FragmntInflater.getTabView(this, i)));
}
}
private void onTabItemSelected(int position) {
Fragment fragment = null;
switch (position) {
case 0:
fragment = mFragmensts[0];
break;
case 1:
fragment = mFragmensts[1];
break;
case 2:
fragment = mFragmensts[2];
break;
case 3:
fragment = mFragmensts[3];
break;
}
if (fragment != null) {
getSupportFragmentManager().beginTransaction().replace(R.id.home_container, fragment).commit();
}
}
}
tablayout_shixian_mainactivity.xml
布局文件如下↓↓
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/home_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></FrameLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:alpha="0.6"
android:background="@color/gainsboro"></View>
<android.support.design.widget.TabLayout
android:id="@+id/bottom_tab_layout"
android:layout_width="match_parent"
android:layout_height="60dp"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="@color/black"
app:tabTextColor="@color/main_tab_text"
android:layout_marginBottom="5dp"/>
</LinearLayout>
代码如下↓↓
package zhang.guo.qiang.fragmenttabhost.tablayout_fragment;
import android.content.Context;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import zhang.guo.qiang.R;
import zhang.guo.qiang.fragmenttabhost.HomeFragment;
import zhang.guo.qiang.fragmenttabhost.PersonFragment;
import zhang.guo.qiang.fragmenttabhost.ProductTypeFragment;
import zhang.guo.qiang.fragmenttabhost.ShopCarFragment;
/**
* Created by ylwx on 2018/7/28.
*/
public class FragmntInflater {
public static final int []mTabRes = new int[]{R.mipmap.tab_home_image, R.mipmap.tab_classify_image, R.mipmap.tab_shoppingbike_image, R.mipmap.tab_user_image};
public static final int []mTabResPressed = new int[]{R.mipmap.tab_home_dark,R.mipmap.tab_classify_dark,R.mipmap.tab_shoppingbike_dark,R.mipmap.tab_user_dark};
public static final String []mTabTitle = new String[]{"首页","分类","购物车","我的"};
public static Fragment[] getFragments(String from){
Fragment fragments[] = new Fragment[4];
fragments[0] = HomeFragment.newInstance(from);
fragments[1] = ProductTypeFragment.newInstance(from);
fragments[2] = ShopCarFragment.newInstance(from);
fragments[3] = PersonFragment.newInstance(from);
return fragments;
}
/**
* 获取Tab 显示的内容
* @param context
* @param position
* @return
*/
public static View getTabView(Context context, int position){
View view = LayoutInflater.from(context).inflate(R.layout.tab_zu,null);
ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_photo);
tabIcon.setImageResource(FragmntInflater.mTabResPressed[position]);
TextView tabText = (TextView) view.findViewById(R.id.tab_title);
tabText.setText(mTabTitle[position]);
return view;
}
}
tab_zu.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">
<ImageView
android:id="@+id/tab_photo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@mipmap/ic_launcher"/>
<TextView
android:id="@+id/tab_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="@color/black"
android:layout_marginTop="3dp"
android:text="甜蜜蜜"/>
</LinearLayout>
代码中用到的资源文件是图片和颜色,自己用自己的就行,如果没有可以到这下载
链接:https://pan.baidu.com/s/172NT6bR1MmeoY2CjEy7zEA 密码:rmcy
//手敲操作 欢迎指正