仿QQUI实现（1）

来源：互联网发布：奇葩说雷军知乎编辑：程序博客网时间：2024/06/07 08:38

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

0 0