仿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里面的，不要搞错了哦。