ViewPage+Fragment + ListView可左右滑动翻页（仿微信页面）
来源：互联网 发布：qq游戏大厅有mac版吗 编辑：程序博客网 时间：2024/06/03 17:36
最近因为需求，要实现类似微信的界面（可左右滑动，可上下滑动）
新建项目（实现左右滑动的效果Activity + Fragment + PageView）
新建四个类继承自Fragment作为滑动界面时显示的四个页面
其中Home页面对应main_tab_01.xml，代码如下
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/Home" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"><ListView android:id="@+id/Home_list" android:layout_width="match_parent" android:layout_height="wrap_content"></ListView></LinearLayout>类的代码如下
package com.example.forever.day1_tab;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;/** * Created by forever on 2016/3/30. */public class Home<span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">extends Fragment {</span> @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.main_tab_01,container,false); }}四个子界面类的代码均相同MainActivity以及其对应的activity_main.xml
activity_main.xml如下所示：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#eee" android:orientation="vertical"> <include layout="@layout/top_bar"></include> <android.support.v4.view.ViewPager android:id="@+id/v_Pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> </android.support.v4.view.ViewPager> <include layout="@layout/bottom_bar"></include></LinearLayout>
MainActivity如下
package com.example.forever.day1_tab;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.widget.ImageButton;import android.widget.LinearLayout;import java.util.ArrayList;import java.util.List;//public class MainActivity extends Title {public class MainActivity extends TitleActivity{ private ViewPager mViewPager; private FragmentPagerAdapter mAdapter; private List<Fragment> mFragments = new ArrayList<Fragment>(); private TitleActivity title_activity = new TitleActivity(); /* 底部的四个按钮 */ private LinearLayout mTabBtnHome; private LinearLayout mTabBtnMsg; private LinearLayout mTabBtnFind; private LinearLayout mTabBtnMe; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);//加载布局 mViewPager = (ViewPager)findViewById(R.id.v_Pager); initView(); mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } }; mViewPager.setAdapter(mAdapter); mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { private int currentIndex; //滑动时修改按钮的图片 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { resetTabBtn(); switch (position) { case 0: ((ImageButton) mTabBtnHome.findViewById(R.id.btn_Home)).setImageResource(R.drawable.tabbar_home_highlighted); break; case 1: ((ImageButton) mTabBtnMsg.findViewById(R.id.btn_Msg)).setImageResource(R.drawable.tabbar_message_center_highlighted); break; case 2: ((ImageButton) mTabBtnFind.findViewById(R.id.btn_Find)).setImageResource(R.drawable.tabbar_message_center_highlighted); break; case 3: ((ImageButton) mTabBtnMe.findViewById(R.id.btn_Me)).setImageResource(R.drawable.tabbar_message_center_highlighted); break; } currentIndex = position; } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { } }); } protected void resetTabBtn(){ //初始化按钮的图片 ((ImageButton) mTabBtnHome.findViewById(R.id.btn_Home)).setImageResource(R.drawable.tabbar_home); ((ImageButton) mTabBtnMsg.findViewById(R.id.btn_Msg)).setImageResource(R.drawable.tabbar_message_center); ((ImageButton) mTabBtnFind.findViewById(R.id.btn_Find)).setImageResource(R.drawable.tabbar_discover); ((ImageButton) mTabBtnMe.findViewById(R.id.btn_Me)).setImageResource(R.drawable.tabbar_profile); } /* 初始化 */ private void initView(){ //初始化Layout方便寻找各布局中的控件 mTabBtnHome = (LinearLayout)findViewById(R.id.id_tab_bottom_Home); mTabBtnMsg = (LinearLayout)findViewById(R.id.id_tab_bottom_Msg); mTabBtnFind = (LinearLayout)findViewById(R.id.id_tab_bottom_Find); mTabBtnMe =(LinearLayout)findViewById(R.id.id_tab_bottom_Me); //初始化个界面， Home tab01 = new Home(); Message tab02 = new Message(); Find tab03 = new Find(); Me tab04 = new Me(); mFragments.add(tab01); mFragments.add(tab02); mFragments.add(tab03); mFragments.add(tab04); }}以上，已经实现了界面左右滑动的效果Home界面加入ListView
新建listview子项目布局文件news_item如下
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/author_title" android:layout_width="match_parent" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_height="50dp" android:orientation="horizontal"> <ImageButton android:id="@+id/user_image" android:layout_width="40dp" android:layout_height="40dp" android:src="@drawable/compose_emotion_background_highlighted" /> <Button android:id="@+id/author_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#0000" android:text=""/> <TextView android:id="@+id/msg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="赞了 xxx 的文章"/> </LinearLayout> <LinearLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:orientation="vertical"> <TextView android:id="@+id/news_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="22sp" android:textStyle="bold" android:text="基于移动平台的信息整合系统发展现状"/> <TextView android:id="@+id/news_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="这段代码也非常简单，只是在 LinearLayout 中放入了一个 TextView 用于显示新闻的标 题。仔细观察 TextView，你会发现其中有几个属性是我们之前没有学过的。android:padding 表示给控件的周围加上补白，这样不至于让文本内容会紧靠在边缘上"/> </LinearLayout></LinearLayout>修改Home类。如下：
package com.example.forever.day1_tab;import android.content.Context;import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ListView;import android.widget.SimpleAdapter;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;/** * Created by forever on 2016/3/30. */public class Home extends Fragment { private SimpleAdapter adapter; List<Map<String,Object>> simple = new ArrayList<Map<String,Object>>(); private ListView news_listview ; @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.main_tab_01,container,false); initSimpleList(); news_listview = (ListView)view.findViewById(R.id.Home_list); news_listview.setAdapter(adapter); return view; } @Override public void onAttach(Context context) { super.onAttach(context); /* 实例化adapter */ adapter = new SimpleAdapter(this.getContext(),simple,R.layout.news_item,new String[]{"author_name","user_image","news_title","news_content"},new int[]{R.id.author_name,R.id.user_image,R.id.news_title,R.id.news_content}); } /* 数据的初始化 */ public void initSimpleList(){ int[] user_image={R.drawable.d_aini,R.drawable.d_aini,R.drawable.d_aini}; String[] author_name = {"李四","张五","王麻子"}; String[] news_title={"人能控制自己的长相吗？","哪个瞬间让你突然觉得读书真有用？","人为什么活着呢？"}; String[] news_content={"然后在 onCreateView()方法中加载了 news_title_frag布局，并给新闻列表的ListView注册了点击事件。接下来在onActivityCreated() 方法中，我们通过是否能够找到一个 id 为 news_content_layout 的 View 来判断当前是双页 模式还是单页模式，这个 id 为 news_content_layout 的 View 只在双页模式中才会出现，在 稍后的布局里你将会看到。", "然后在 onCreateView()方法中加载了 news_title_frag布局，并给新闻列表的ListView注册了点击事件。接下来在onActivityCreated() 方法中，我们通过是否能够找到一个 id 为 news_content_layout 的 View 来判断当前是双页 模式还是单页模式，这个 id 为 news_content_layout 的 View 只在双页模式中才会出现，在 稍后的布局里你将会看到。", "然后在 onCreateView()方法中加载了 news_title_frag布局，并给新闻列表的ListView注册了点击事件。接下来在onActivityCreated() 方法中，我们通过是否能够找到一个 id 为 news_content_layout 的 View 来判断当前是双页 模式还是单页模式，这个 id 为 news_content_layout 的 View 只在双页模式中才会出现，在 稍后的布局里你将会看到。"}; Map<String,Object> map; simple.clear(); for(int i = 0; i< 3 ;i++){ map = new HashMap<String,Object>(); map.put("user_image",user_image[i]); map.put("author_name",author_name[i]); map.put("news_title",news_title[i]); map.put("news_content",news_content[i]); simple.add(map); } }}至此，可左右滑动，可上下拉动的仿微信页面已经完成
留下只言片语，让我知道有人在看哦^_^
0 2
- ViewPage+Fragment + ListView可左右滑动翻页（仿微信页面）
- ViewPage Fragment 页面滑动切换
- viewpage嵌套listview， 效果：滑动listview删除，滑动非listview区域viewpage翻页
- ViewPage 翻页滑动
- viewpager左右滑动的 +Tab指示（方式1-------------RadioGroup+ViewPage+Fragment）
- Android 中Fragment+ViewPage+Tablayout 实现 左右滑动（新学的方法）
- ViewPage判断左右滑动
- ViewPage判断左右滑动
- ViewPage判断左右滑动
- ViewPage判断左右滑动
- ViewPage判断左右滑动
- ViewPage滑动页面（1）
- Fragment与ViewPager实现页面滑动翻页
- viewpage+fragment+下划线滑动
- ViewPage+Fragment 滑动+点击
- ViewPage+Fragment 滑动+点击
- ViewPager结合Fragment实现页面左右滑动
- AppBarLayout、ViewPager、Fragment实现页面左右滑动
- hdu 1023（大数+卡特兰数）
- mac 环境下svn客户端安装和简单使用
- 阅读《Android 从入门到精通》（34）——Intent Filter
- jsp入门学习
- Oracle 11g 安装
- ViewPage+Fragment + ListView可左右滑动翻页（仿微信页面）
- SpringMVC的API和Spring的官方说明文档的地址。
- Hbase配置安装
- 在Frame中对Graphics类的应用
- Unity 之 Light ： Light Probe
- Git使用技巧大全和技巧
- Android几种弹窗的实现
- 日期判断是今天／明天／后天
- iOS之动态热修复技术JSPatch（一）
