仿QQUI实现（1）

DrawerLayout+FragmentTabHost

本节主要内容：

DrawerLayout简介

DrawerLayout使用

FragmentTabHost简介

进行项目编码

1.DrawerLayout简介

DrawerLayout这个类位于android.support.v4.widget包下，要想在项目中使用它，必须在gradle文件中添加依赖，格式如下：

compile 'com.android.support:support-v4:23.0.1'

另外我在项目中使用了ButterKnife，有关于ButterKnife的详细信息参见官网ButterKnife官网，在项目中通过下面这句添加ButterKnife依赖：

compile 'com.jakewharton:butterknife:7.0.1'

由于项目后面会用到动画效果所以还要添加nineoldandroids依赖：

compile 'com.nineoldandroids:library:2.4.0'

完整的dependencies如下所示：

dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'
compile 'com.android.support:support-v4:23.0.1'
compile 'com.jakewharton:butterknife:7.0.1'
compile 'com.nineoldandroids:library:2.4.0'
}

2.DrawerLayout使用

在代码中通过引用com.android.support.v4.widget.DrawerLayout创建DrawerLayout，完整的实例如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/activity_main_menu_drawerlayout">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/activity_main_open_right_menu"
android:layout_alignParentRight="true"
android:text="右边菜单"
android:layout_marginRight="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>

<fragment
android:id="@+id/activity_main_left_menu"
android:name="类的完整名称"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="left"
android:tag="LEFT">
</fragment>

<fragment
android:id="@+id/activity_main_right_menu"
android:name="类的完整名称"
android:layout_width="20dp"
android:layout_gravity="right"
android:layout_height="fill_parent"
android:tag="RIGHT"></fragment>

</android.support.v4.widget.DrawerLayout>

其实tag为LEFT的代表左侧菜单，为RIGHT的代表右侧菜单。

3.FragmentTabHost简介

FragmentTabHost是自Android 3.0以后提出的TabHost的替代品，其也位于com.android.support.v4包下，其使用时的xml如下所示：

<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
</android.support.v4.app.FragmentTabHost>

4，进行项目编码

第一步

实现包含FragmentTabHost和DrawerLayout的主布局文件，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/activity_main_menu_drawerlayout">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/activity_main_open_right_menu"
android:layout_alignParentRight="true"
android:text="右边菜单"
android:layout_marginRight="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"/>

<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>

</RelativeLayout>

<fragment
android:id="@+id/activity_main_left_menu"
android:name="带有完整包路径的Fragment类名"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="left"
android:tag="LEFT">
</fragment>

<fragment
android:id="@+id/activity_main_right_menu"
android:name="带有完整包路径的Fragment类名"
android:layout_width="20dp"
android:layout_gravity="right"
android:layout_height="fill_parent"
android:tag="RIGHT"></fragment>

</android.support.v4.widget.DrawerLayout>

第二步

新建两个侧滑页面的Fragment以及对应的布局文件，这里就不祥加赘述了，

写好这些以后自然要写底部tab的每一个小块的布局样式，方便在代码中循环的将底部tab初始化，底部tab的item布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:textSize="10sp"
android:textColor="@drawable/selector_tab_text_background">
</TextView>

</LinearLayout>

这里我只简单的放了一个textview，有需要的朋友可根据需要在内部添加其他内容。

按照上述操作，我们就写完了关于侧滑页面的布局以及Fragment，接下来应该进行的是什么呢？貌似Tab的Fragment还没有写，那就让我们意思开始吧。

第一个Tab的布局文件如下：

<?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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"/>
</LinearLayout>

作为示例，我只写了一个TextView，接下来是他的Fragment ：

public class FirstFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.activity_main_bottom_diy_fragment_layout,container,false);
}
}

剩余两个Fragment与上雷同，不再赘述。

第三步

在MainActivity中将DrawerLayout和FragmentTabHost组织起来，代码如下：

import android.os.Bundle;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

import com.nineoldandroids.view.ViewHelper;
import com.tt.teku.fragment.mainbottomtabfragment.DiyFragment;
import com.tt.teku.fragment.mainbottomtabfragment.HomeFragment;
import com.tt.teku.fragment.mainbottomtabfragment.WallpaperFragment;

import butterknife.Bind;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

@Bind(R.id.activity_main_open_right_menu)
Button mActivityMainOpenRightMenuBtn;
@Bind(R.id.activity_main_menu_drawerlayout)
DrawerLayout mActivityMainMenuDrawerlayout;
@Bind(android.R.id.tabhost)
FragmentTabHost mTabHost;

private Class fragmentArray[] = {DiyFragment.class, HomeFragment.class, WallpaperFragment.class};

private int mImageViewArray[] = {R.drawable.tab_home_btn, R.drawable.tab_diy_btn, R.drawable.tab_wallpaper_btn,};

private String mTextviewArray[] = {"TAB1", "TAB2", "TAB3"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
mActivityMainMenuDrawerlayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);
initData();
initTabContent();
}

@Override
protected void onDestroy() {
super.onDestroy();
ButterKnife.unbind(this);
}

@OnClick(R.id.activity_main_open_right_menu)
public void OpenRightMenu(View v) {
mActivityMainMenuDrawerlayout.openDrawer(Gravity.RIGHT);
mActivityMainMenuDrawerlayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED, Gravity.RIGHT);
}

public void initData() {
mActivityMainMenuDrawerlayout.setDrawerListener(new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
View mContent = mActivityMainMenuDrawerlayout.getChildAt(0);
View mMenu = drawerView;
float scale = 1 - slideOffset;
float rightScale = 0.8f + scale * 0.2f;

if (drawerView.getTag().equals("LEFT")) {

float leftScale = 1 - 0.3f * scale;

ViewHelper.setScaleX(mMenu, leftScale);
ViewHelper.setScaleY(mMenu, leftScale);
ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));
ViewHelper.setTranslationX(mContent, mMenu.getMeasuredWidth() * (1 - scale));
ViewHelper.setPivotX(mContent, 0);
ViewHelper.setPivotY(mContent, mContent.getMeasuredHeight() / 2);
mContent.invalidate();
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale);
} else {
ViewHelper.setTranslationX(mContent, -mMenu.getMeasuredWidth() * slideOffset);
ViewHelper.setPivotX(mContent, mContent.getMeasuredWidth());
ViewHelper.setPivotY(mContent,
mContent.getMeasuredHeight() / 2);
mContent.invalidate();
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale);
}
}

@Override
public void onDrawerOpened(View drawerView) {

}

@Override
public void onDrawerClosed(View drawerView) {
mActivityMainMenuDrawerlayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED, Gravity.RIGHT);
}

@Override
public void onDrawerStateChanged(int newState) {

}
});

}

public void initTabContent() {
mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
int count = fragmentArray.length;
for (int i = 0; i < count; i++) {
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i]).setIndicator(getTabItemView(i));
mTabHost.addTab(tabSpec, fragmentArray[i], null);
mTabHost.getTabWidget().setDividerDrawable(null);
}
}

private View getTabItemView(int index) {
View view = LayoutInflater.from(this).inflate(R.layout.activity_main_bottom_tab_item_view, null);
TextView textView = (TextView) view.findViewById(R.id.textview);
textView.setText(mTextviewArray[index]);
imageView.setImageResource(mImageViewArray[index]);
return view;
}
}

对于ViewHelper这一块有不明白的参见鸿洋大神博客

到此，我们的代码就书写完毕了，来看看效果吧。







注意

FragmentTabHost里面管理的Fragment必须是com.android.support.v4.app里面的，不要搞错了哦。