淘先锋技术网

首页 1 2 3 4 5 6 7

DrawerLayout的简单使用（网易标题的实现）

今天给大家带来的是drawerlayout，首先DrawerLayout是Support Library包中实现了侧滑菜单效果的控件，可以说drawerLayout是因为第三方控件如MenuDrawer等的出现之后，google借鉴而出现的产物。drawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（drawerLayout自身特性），主内容区的内容可以随着菜单的点击而变化

那么接下来就给大家说一下这个drawerlayout的实现思路：

//整个思路：
* 1.完成项目XML布局
* a.把根布局DrawerLayout,
* b.写两个直接的子控件,一个LL,FG(注意添加到左边的参数,class是Fragment路径)
* c.TabLayout(依赖)控件和ViewPager
* <p>
* 2.初始化控件(注意:这里是TabLayout,不是tableLayout.会报强类型转换异常)
* <p>
* 3.初始化ActionBar
* a.获取一个ActionBar对象
* b.给ActionBar设置图片
* C.ActionBar关联DrawerLayout
* d.DrawerLayout关联ActionBar
* <p>
* 4.初始化ViewPager
* a.创建一个装Fragment的集合
* b.创建Fragment,把Fragment添加到容器中
* c.创建VIewPager的适配器和设置适配器的逻辑
* <p>
* 4.使两两之间相关联.
* a.tabLayout创建指示器
* b.使用TabLayout与VIewPager相关联
* c.给TabLayout指示器设置文本

一：完成mainactivity的布局：

<android.support.v4.widget.DrawerLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/drawerLayout"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent">  
    <LinearLayout  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:orientation="vertical">  
        <android.support.design.widget.TabLayout  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/tabLayout"/>  
        <android.support.v4.view.ViewPager  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content"  
            android:id="@+id/viewPager"/>  
    </LinearLayout>  




这个fragment是实现的一个左侧拉
  <fragment  
      android:layout_gravity="start"  
      class="com.example.mydrawerlayout01.BlankFragment"  
      android:layout_width="match_parent"  
      android:layout_height="match_parent"  
      />

二：完成左侧拉的布局： 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    tools:context="com.example.mydrawerlayout01.BlankFragment"  
    android:background="#fff">  
  
    <!-- TODO: Update blank fragment layout -->  
    <TextView  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        android:text="侧滑菜单的Fragment"  
        android:layout_gravity="center"  
        android:textSize="30sp"/>  
  
</FrameLayout>

//如果我们的fragment是原始的颜色，不容易看出来，所有我们给他改变一下颜色；

三：完成我们的XML布局之后呢我们现在就去完成我们的Java代码： 

import android.os.Bundle;  
import android.support.design.widget.TabLayout;  
import android.support.v4.app.Fragment;  
import android.support.v4.view.ViewPager;  
import android.support.v4.widget.DrawerLayout;  
import android.support.v7.app.ActionBar;  
import android.support.v7.app.ActionBarDrawerToggle;  
import android.support.v7.app.AppCompatActivity;  
import android.view.MenuItem;  
  
import java.util.ArrayList;  
import java.util.List;  
  
public class MainActivity extends AppCompatActivity {  
  
    private DrawerLayout drawerLayout;  
    private TabLayout tabLayout;  
    private ViewPager viewPager;  
    private ActionBarDrawerToggle toggle;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        //初始化控件  
        initView();  
        //初始化ActionBar  
        initActionBar();  
        //初始化ViewPager;  
        initViewPaget();  
    }  
    //初始化ViewPager;  
    private void initViewPaget() {  
        //首先创建一个集合来装Fragment  
        List<Fragment> fragments=new ArrayList<>();  
        //创建两个Fragment装入集合  
        fragments.add(new Fragment01());  
        fragments.add(new Fragment02());  
        //创建ViewPager适配器  
         MyAdapter adapter=new MyAdapter(getSupportFragmentManager());  
        //吧集合放入适配器  
        adapter.setMfragments(fragments);  
        //给ViewPager设置适配器  
        viewPager.setAdapter(adapter);  
        //tabLayout/  
        //tabLayout指示器有几个就创建几个  
        for (int i = 0; i < fragments.size(); i++) {  
            tabLayout.addTab(tabLayout.newTab());  
        }  
        //使tabLayout与ViewPager关联  
        tabLayout.setupWithViewPager(viewPager);  
        //给tabLayout设置文本信息  
        for (int i = 0; i < fragments.size(); i++) {  
            tabLayout.getTabAt(i).setText("新闻"+i);  
        }  
    }  
    //初始化ActionBar,设置左上角按钮，当点击是弹出左边的抽屉Fragment  
    private void initActionBar() {  
        //获取ActionBar对象  
        ActionBar actionBar=getSupportActionBar();  
        //给左上角添加一个返回的图标，参数true为加上这个图标（在android4.0及以上默认false）  
      actionBar.setDisplayHomeAsUpEnabled(true);  
        //这个类提供了一种方便的方式来绑定功能 DrawerLayout和ActionBar来实现推荐的导航抽屉设计  
        //第一个参数上下文,第二个DrawerLayout控件第三个资源文件（只是为了人性化，照顾盲人，点击时会发出声音）  
        toggle = new ActionBarDrawerToggle(MainActivity.this, drawerLayout, R.string.open, R.string.close);  
        //将抽屉指示器的状态与链接的DrawerLayout同步其状态  
        toggle.syncState();  
       // ActionBar关联DrawerLayout  
        drawerLayout.addDrawerListener(toggle);  
    }  
       //设置左上角图标具有的点击事件  
    @Override  
    public boolean onOptionsItemSelected(MenuItem item) {  
        if (toggle.onOptionsItemSelected(item)){  
            return true;  
        }  
        return super.onOptionsItemSelected(item);  
    }  
  
    //初始化控件  
    private void initView() {  
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);  
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);  
        viewPager = (ViewPager) findViewById(R.id.viewPager);  
    }
//这里注意的就是我们的fragment包，必须是一样的， 
android.support.v4.app.Fragment


四：完成mainactivity的代码，接下来就是我们的左侧拉，当然了我这里只是创建了一个fragment，到时候我们需要几个
就可以创建几个fragment，并在里面实现自己的逻辑代码；


public class BlankFragment extends Fragment {  
    @Override  
    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
                             Bundle savedInstanceState) {  
        // Inflate the layout for this fragment  
        return inflater.inflate(R.layout.fragment_blank, container, false);  
    }  
  
}
五：设置我们的fragment的适配器 

public class MyAdapter extends FragmentPagerAdapter{  
    public MyAdapter(FragmentManager fm) {  
        super(fm);  
    }  
     private List<Fragment> mfragments;  
   //接收传过来的值  
    public void setMfragments(List<Fragment> fragments ){  
        mfragments=fragments;  
    }  
//返回对应位置的Fragment  
    @Override  
    public Fragment getItem(int position) {  
        return mfragments.get(position);  
    }  
  
    @Override  
    public int getCount() {  
        return mfragments.size();  
    }  
}


这就是我们最后实现的一个简单的效果！！！

谢谢大家的支持！！!