实现网易新闻框架的搭建
2017-08-31 13:24
218 查看
使用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;@Overrideprotected 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关联DrawerLayoutdrawer_layout.addDrawerListener(toggle);}//在点击选项菜单(OptionsMenu:点击menu弹出的菜单)的菜单项时// 即调用了onMenuItemSelected 也调用了onOptionsItemSelected@Overridepublic 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}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn 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 --><ListViewandroid: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}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentView 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).4000commit();getActivity().getSupportFragmentManager().beginTransaction().hide(second_fragment).hide(three_fragment).hide(four_fragment).hide(five_fragment).commit();list_view.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic 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;}@Overridepublic int getCount() {return list.size();}@Overridepublic Object getItem(int i) {return null;}@Overridepublic long getItemId(int i) {return 0;}@Overridepublic 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的布局文件
<HorizontalScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"><android.support.design.widget.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"></android.support.design.widget.TabLayout></HorizontalScrollView><android.support.v4.view.ViewPagerandroid: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<>();@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentinflate = 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@Overridepublic Fragment getItem(int position) {return list_frag.get(position);}@Overridepublic int getCount() {return list_frag.size();}@Overridepublic 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}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragment//我们在这里面进行添加数据的操作return inflater.inflate(R.layout.fragment_pager, container, false);}}
最后来展示一下我们实现的效果:
相关文章推荐
- 快速实现网易新闻框架搭建
- 004-搭建框架-实现AOP机制【一】代理技术
- 使用SSM框架搭建Web服务器实现登录功能(Spring+SpringMVC+Mybatis)
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建
- SpringMVC 框架的搭建及基本功能的实现
- Spring4.X + Spring MVC + Mybatis3 零配置应用开发框架搭建详解 (3) - 实现最基本的登录处理
- SpringMVC框架搭建步骤以及注解功能实现
- SSM框架搭建(Spring+SpringMVC+MyBatis)与easyui集成并实现增删改查实现
- 高仿新闻教程-开源框架的简单实现——网易新闻的标题栏(一)
- SSH物流开发系统设计:搭建框架并实现登录
- IOS开发-基于WebDriverAgent代理服务,实现iOS手机app自动化测试的框架搭建
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- RadioGroup + Fragment实现项目框架搭建
- hibernate框架的搭建与简单实现增删改
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(1)-框架搭建
- [置顶] Spring4.0.9+SpringMVC4.0.9+SpringSecurity3.2.5+MyBatis3.2.5+Activiti5.21即:SSM框架的企业级搭建之番外篇— 根据POI技术实现
- 一行代码快速实现今日头条 网易新闻焦点图自动循环轮播效果
- ASP.NET SingalR + MongoDB 实现简单聊天室(一):搭建基本框架
- 搭建Apache Mina框架并实现Server与Client端的简单消息传递
- 从零搭建SSM框架(五)Maven实现Tomcat热部署