DrawerLayout与FragmentTabHost结合模仿oschina主界面

1. DrawerLayout实现侧滑菜单

drawerlayout是官方出的侧滑菜单控件，使用起来非常方便。将它当作LinearLayout一样的布局控件，完成布局xml文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="fly.drawerandtab.ui.MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

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

<FrameLayout

4000
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/windows_bg">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dip">

<fly.drawerandtab.widget.MyFragmentTabHost
android:id="@+id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dip" />

<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="?attr/lineColor" />
</RelativeLayout>

<ImageView
android:id="@+id/quick_option_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
android:contentDescription="@null"
android:src="@drawable/btn_quickoption_selector" />
</FrameLayout>
</LinearLayout>

<fragment
android:id="@+id/left_fragment"
android:name="fly.drawerandtab.fragment.LeftFragment"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="left"
tools:layout="@layout/fragment_left" />

<fragment
android:id="@+id/right_fragment"
android:name="fly.drawerandtab.fragment.RightFragment"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="right"
tools:layout="@layout/fragment_right" />
</android.support.v4.widget.DrawerLayout>

一个布局控件，这里用的是LinearLayout充满父容器，两个fragment分别代表左侧滑和右侧滑，android:layout_gravity属性代表左边还是右边。

左侧滑栏的fragment代码：

package fly.drawerandtab.fragment;

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.Toast;

import fly.drawerandtab.R;

/**
* Created by Fly on 2016/6/25.
*/
public class LeftFragment extends Fragment implements View.OnClickListener{
private View mLeftView;
private View first_item;
private View second_item;
private View third_item;
private View forth_item;
private View fifth_item;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mLeftView = inflater.inflate(R.layout.fragment_left, container, false);
initView();

return mLeftView;
}

private void initView(){
first_item = mLeftView.findViewById(R.id.first_item);
second_item = mLeftView.findViewById(R.id.second_item);
third_item = mLeftView.findViewById(R.id.third_item);
forth_item = mLeftView.findViewById(R.id.forth_item);
fifth_item = mLeftView.findViewById(R.id.fifth_item);

first_item.setOnClickListener(this);
second_item.setOnClickListener(this);
third_item.setOnClickListener(this);
forth_item.setOnClickListener(this);
fifth_item.setOnClickListener(this);
}

@Override
public void onClick(View v) {
int id = v.getId();
switch(id){
case R.id.first_item:
Toast.makeText(getActivity(),"第一个",2000).show();
break;
}
}
}

布局文件：

<?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:background="?attr/layout_bg_normal">

<fly.drawerandtab.widget.CustomerScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">

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

</fly.drawerandtab.widget.CustomerScrollView>
</LinearLayout>

2. FragmentTabHost实现底部菜单

自定义一个类继承FragmentTabHost：

package fly.drawerandtab.widget;

import android.content.Context;
import android.support.v4.app.FragmentTabHost;
import android.util.AttributeSet;

/**
* Created by Fly on 2016/6/26.
*/
public class MyFragmentTabHost extends FragmentTabHost {
private String mCurrentTag;
private String mNoTabChangedTag;

public MyFragmentTabHost(Context context, AttributeSet attrs) {
super(context, attrs);
}

@Override
public void onTabChanged(String tabId) {
if(tabId.equals(mNoTabChangedTag)){
setCurrentTabByTag(mCurrentTag);
}else{
super.onTabChanged(tabId);
mCurrentTag = tabId;
}
}

public void setNoTabChangedTag(String tag) {
this.mNoTabChangedTag = tag;
}
}

放入布局文件中。（在第一部分）

定义每一个Tab的内容，继承Fragment就好，这里贴上一个的代码：

package fly.drawerandtab.fragment;

import android.support.v4.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;

import fly.drawerandtab.R;
import fly.drawerandtab.interf.OnTabReselectListener;

/**
* Created by Fly on 2016/6/26.
*/
public class MeFragment extends Fragment implements OnTabReselectListener{
private View mView;
private TextView mTextView;

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mView = inflater.inflate(R.layout.fragment_me, container, false);
mTextView = (TextView) mView.findViewById(R.id.me_txt);

return mView;
}

@Override
public void onTabReselect() {
mTextView.setText(R.string.double_click);
}
}

存储Tab的信息：

package fly.drawerandtab.ui;

import fly.drawerandtab.R;
import fly.drawerandtab.fragment.ExploreFragment;
import fly.drawerandtab.fragment.MeFragment;
import fly.drawerandtab.fragment.NewsFragment;
import fly.drawerandtab.fragment.TweetFragment;

/**
* Created by Fly on 2016/6/26.
*/
public enum MainTab {
NEWS(0, R.string.main_tab_news, R.drawable.tab_icon_new, NewsFragment.class),

TWEET(1, R.string.main_tab_tweet, R.drawable.tab_icon_tweet, TweetFragment.class),

QUICK(2, R.string.main_tab_quick, R.drawable.tab_icon_new, null),

EXPLORE(3, R.string.main_tab_explore, R.drawable.tab_icon_explore, ExploreFragment.class),

ME(4, R.string.main_tab_me, R.drawable.tab_icon_me, MeFragment.class);

private int index;
private int resName;
private int resIcon;
private Class<?> clz;

MainTab(int index, int resName, int resIcon, Class<?> clz) {
this.index = index;
this.resName = resName;
this.resIcon = resIcon;
this.clz = clz;

}

public int getIndex() {
return index;

e25f
}

public void setIndex(int index) {
this.index = index;
}

public int getResIcon() {
return resIcon;
}

public void setResIcon(int resIcon) {
this.resIcon = resIcon;
}

public int getResName() {
return resName;
}

public void setResName(int resName) {
this.resName = resName;
}

public Class<?> getClz() {
return clz;
}

public void setClz(Class<?> clz) {
this.clz = clz;
}
}

在MainActivity中初始化自定义的FragmentTabHost:

package fly.drawerandtab.ui;

import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;

import fly.drawerandtab.R;
import fly.drawerandtab.interf.OnTabReselectListener;
import fly.drawerandtab.widget.MyFragmentTabHost;

public class MainActivity extends AppCompatActivity implements TabHost.OnTabChangeListener, View.OnTouchListener {

private DrawerLayout mDrawerLayout = null;
private MyFragmentTabHost mTabHost;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

initView();
}

private void initView() {

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);

mTabHost = (MyFragmentTabHost) findViewById(R.id.tabhost);

mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
//        mTabHost.setup(this.getLocalActivityManager());
if (android.os.Build.VERSION.SDK_INT > 10) {
mTabHost.getTabWidget().setShowDividers(0);
}
initTabs();

mTabHost.setCurrentTab(0);
mTabHost.setOnTabChangedListener(this);
}

private void initTabs() {
MainTab[] tabs = MainTab.values();
final int size = tabs.length;
for (int i = 0; i < size; i++) {
MainTab mainTab = tabs[i];
TabHost.TabSpec spec = mTabHost.newTabSpec(getString(mainTab.getResName()));
View indicator = LayoutInflater.from(getApplicationContext()).inflate(R.layout.tab_indicator, null);
TextView title = (TextView) indicator.findViewById(R.id.tab_title);
Drawable drawable = this.getResources().getDrawable(mainTab.getResIcon());
title.setCompoundDrawablesWithIntrinsicBounds(null, drawable, null, null);
if (i == 2) {
indicator.setVisibility(View.INVISIBLE);
mTabHost.setNoTabChangedTag(getString(mainTab.getResName()));
}
title.setText(getString((mainTab.getResName())));

spec.setIndicator(indicator);
spec.setContent(new TabHost.TabContentFactory() {
@Override
public View createTabContent(String tag) {
return new View(MainActivity.this);
}
});
mTabHost.addTab(spec, mainTab.getClz(), null);
mTabHost.getTabWidget().getChildAt(i).setOnTouchListener(this);
}
}

@Override
public void onTabChanged(String tabId) {
final int size = mTabHost.getTabWidget().getTabCount();
for (int i = 0; i < size; i++) {
View v = mTabHost.getTabWidget().getChildAt(i);
if (i == mTabHost.getCurrentTab()) {
v.setSelected(true);
} else {
v.setSelected(false);
}
}

supportInvalidateOptionsMenu();
}

@Override
public boolean onTouch(View v, MotionEvent event) {
super.onTouchEvent(event);
boolean consumed = false;
// use getTabHost().getCurrentTabView to decide if the current tab is
// touched again
if (event.getAction() == MotionEvent.ACTION_DOWN
&& v.equals(mTabHost.getCurrentTabView())) {
// use getTabHost().getCurrentView() to get a handle to the view
// which is displayed in the tab - and to get this views context
Fragment currentFragment = getCurrentFragment();
if (currentFragment != null
&& currentFragment instanceof OnTabReselectListener) {
OnTabReselectListener listener = (OnTabReselectListener) currentFragment;
listener.onTabReselect();
consumed = true;
}
}
return consumed;
}

private Fragment getCurrentFragment() {
return getSupportFragmentManager().findFragmentByTag(
mTabHost.getCurrentTabTag());
}
}

这里写了一个接口，是为了判断是否再次点了当前的tab：

package fly.drawerandtab.interf;

/**
* Created by Fly on 2016/7/17.
*/
public interface OnTabReselectListener {
void onTabReselect();
}

源码地址：GitHub地址

CSDN地址