使用drawerlayout,viewpager,tablelayout,fragment来实现网易新闻框架的搭建
一:首先我们来完成activity_main的布局:
注意:我们整个布局的大布局应该设置为drawerlayout
<?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/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/linear"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"></RelativeLayout>
<fragment
android:id="@+id/fragment"
class="com.example.dell.wangyishall.LeftFragment"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="start"
/>
<fragment
android:background="#fff"
android:id="@+id/fragment2"
class="com.example.dell.wangyishall.RightFragment"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="end"
/>
</android.support.v4.widget.DrawerLayout>
完成布局我们在activity中完成逻辑代码
package com.example.dell.wangyishall; import android.os.Bundle; import android.support.v4.view.GravityCompat; 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; public class MainActivity extends AppCompatActivity { private DrawerLayout drawer_layout; private ActionBarDrawerToggle toggle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); init_actionBar_Draw(); } //初始化控件drawerlayout实现侧拉 private void initView() { drawer_layout = (DrawerLayout) findViewById(R.id.activity_main); } /** * 初始化ActionBar 和 DrawerLayout */ private void init_actionBar_Draw() { //得到actionbar对象 ActionBar actionBar = getSupportActionBar(); //决定左上角的图标是否可以点击 actionBar.setDisplayHomeAsUpEnabled(true); actionBar.setHomeButtonEnabled(true); //改变android.R.id.home返回图标。 //Drawer拉出、隐藏,带有android.R.id.home动画效果。 // 监听Drawer拉出、隐藏; toggle = new ActionBarDrawerToggle(this, drawer_layout, R.string.app_name, R.string.app_name); //将抽屉指示器的状态与链接的DrawerLayout同步其状态 toggle.syncState(); // ActionBar关联DrawerLayout drawer_layout.addDrawerListener(toggle); } //在点击选项菜单(OptionsMenu:点击menu弹出的菜单)的菜单项时 // 即调用了onMenuItemSelected 也调用了onOptionsItemSelected @Override public boolean onOptionsItemSelected(MenuItem item) { if (drawer_layout.isDrawerOpen(GravityCompat.END)) { drawer_layout.closeDrawer(GravityCompat.END);//关闭抽屉 return super.onOptionsItemSelected(item); } return toggle.onOptionsItemSelected(item) | super.onOptionsItemSelected(item); } }
完成第一个activity布局之后,因为我们在里面设置了这个左侧了fragment,所以接下来就是完成左侧fragment
里面添加的fragment那么第一个就是我们的右侧啦,因为在这个小demo里没有填充右侧拉里面的功能或是数据package com.example.dell.wangyishall; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * A simple {@link Fragment} subclass. */ public class RightFragment extends Fragment { public RightFragment() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_right, container, false); }
}
那么我们现在来实现左侧拉的fragment:那么首先还是我们先完成他的布局:
<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" android:background="#fff" tools:context="com.example.dell.wangyishall.LeftFragment"> <!-- TODO: Update blank fragment layout --> <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="match_parent"></ListView> </FrameLayout>
接下来就是左侧拉里面的逻辑代码:在这里面的呢我们一个在左侧拉的fragment里添加了五个点击事件,并且用的
listview来添加;package com.example.dell.wangyishall; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.ListView; import java.util.ArrayList; import java.util.List; /** * A simple {@link Fragment} subclass. */ public class LeftFragment extends Fragment { private MainFragment main_fragment; private SecondFragment second_fragment; private ThirdFragment three_fragment; private fourthFragment four_fragment; private FifthFragment five_fragment; public LeftFragment() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment View inflate = inflater.inflate(R.layout.fragment_left, container, false); ListView list_view = inflate.findViewById(R.id.listview); List<String> list_str = new ArrayList<>(); for (int i = 1; i < 6; i++) { list_str.add("第"+i+"个Fragment"); } list_view.setAdapter(new MyBaseAdapter(getActivity(),list_str)); main_fragment = new MainFragment(); second_fragment = new SecondFragment(); three_fragment = new ThirdFragment(); four_fragment = new fourthFragment(); five_fragment = new FifthFragment(); getActivity().getSupportFragmentManager().beginTransaction().add(R.id.linear, main_fragment).commit(); getActivity().getSupportFragmentManager().beginTransaction().add(R.id.linear, second_fragment).commit(); getActivity().getSupportFragmentManager().beginTransaction().add(R.id.linear, three_fragment).commit(); getActivity().getSupportFragmentManager().beginTransaction().add(R.id.linear, four_fragment).commit(); getActivity().getSupportFragmentManager().beginTransaction().add(R.id.linear, five_fragment).commit(); getActivity().getSupportFragmentManager().beginTransaction().hide(second_fragment).hide(three_fragment).hide(four_fragment).hide(five_fragment).commit(); list_view.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) { switch (i) { case 0: getActivity().getSupportFragmentManager().beginTransaction().show(main_fragment).hide(second_fragment).hide(three_fragment).hide(four_fragment).hide(five_fragment).commit(); break; case 1: getActivity().getSupportFragmentManager().beginTransaction().show(second_fragment).hide(main_fragment).hide(three_fragment).hide(four_fragment).hide(five_fragment).commit(); break; case 2: getActivity().getSupportFragmentManager().beginTransaction().show(three_fragment).hide(main_fragment).hide(second_fragment).hide(four_fragment).hide(five_fragment).commit(); break; case 3: getActivity().getSupportFragmentManager().beginTransaction().show(four_fragment).hide(main_fragment).hide(second_fragment).hide(three_fragment).hide(five_fragment).commit(); break; case 4: getActivity().getSupportFragmentManager().beginTransaction().show(five_fragment).hide(main_fragment).hide(second_fragment).hide(three_fragment).hide(four_fragment).commit(); break; default: break; } } }); return inflate; }
上面也说到了我们用了这个listview,和fragment,那么接下来我们就是给他优化一下package com.example.dell.wangyishall; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.TextView; import java.util.List; /** * Created by DELL on 2017/8/31. */ public class MyBaseAdapter extends BaseAdapter { public Context context; public List<String> list; public MyBaseAdapter(Context context, List<String> list) { this.context = context; this.list = list; } @Override public int getCount() { return list.size(); } @Override public Object getItem(int i) { return null; } @Override public long getItemId(int i) { return 0; } @Override public View getView(int i, View view, ViewGroup viewGroup) { View inflate = View.inflate(context, R.layout.item, null); TextView text = inflate.findViewById(R.id.tv_item); text.setText(list.get(i)); return inflate; } }
在这我们实现fragment_main的布局文件
<HorizontalScrollView android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content"></android.support.design.widget.TabLayout> </HorizontalScrollView> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent"></android.support.v4.view.ViewPager>
那么实现完左侧拉里面的fragment之后呢,我们紧接着就去实现左侧拉里面的第一个fragment,因为左侧拉里面的第
一个fragment是我们实现加载数据的页面:package com.example.dell.wangyishall; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import java.util.ArrayList; import java.util.List; /** * A simple {@link Fragment} subclass. */ public class MainFragment extends Fragment { private View inflate; private TabLayout tab_layout; private ViewPager pager; List<String> list_str = new ArrayList<>(); @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment inflate = inflater.inflate(R.layout.fragment_main, container, false); for (int i = 0; i < 10; i++) { list_str.add("No."+i); } initView(); init_tab_pager(); return inflate; } private void initView() { tab_layout = (TabLayout) inflate.findViewById(R.id.tab_layout); pager = (ViewPager) inflate.findViewById(R.id.pager); } private void init_tab_pager() { List<Fragment> list_fragment = new ArrayList<>(); for (int i = 0; i < 10; i++) { PagerFragment fragment = new PagerFragment(); list_fragment.add(fragment); } tab_layout.setTabMode(TabLayout.MODE_FIXED); for (int i = 0; i < 10; i++) { tab_layout.addTab(tab_layout.newTab().setText(list_str.get(i))); } MyPagerAdapter adapter = new MyPagerAdapter(getActivity().getSupportFragmentManager(),list_str,list_fragment); pager.setOffscreenPageLimit(1); pager.setAdapter(adapter); tab_layout.setupWithViewPager(pager); }
接着创建fragment的适配器:
package com.example.dell.wangyishall; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.List; /** * Created by DELL on 2017/8/31. */ public class MyPagerAdapter extends FragmentPagerAdapter { public List<String> list_str; public List<Fragment> list_frag; //接收传过来的值 public MyPagerAdapter(FragmentManager fm, List<String> list_str, List<Fragment> list_frag) { super(fm); this.list_str = list_str; this.list_frag = list_frag; } //返回对应位置的Fragment @Override public Fragment getItem(int position) { return list_frag.get(position); } @Override public int getCount() { return list_frag.size(); } @Override public CharSequence getPageTitle(int position) { return list_str.get(position%list_str.size()); } }
那么我们的pagerfragment就是我们加载数据所需要的页面:
package com.example.dell.wangyishall; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * A simple {@link Fragment} subclass. */ public class PagerFragment extends Fragment { public PagerFragment() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment //我们在这里面进行添加数据的操作 return inflater.inflate(R.layout.fragment_pager, container, false); } }
最后来展示一下我们实现的效果: