实现微信布局的四种方式()四
2016-04-24 09:39
676 查看
第四种:使用第三方库ViewPagerIndicator指示器。将ViewPager与FragmentPagerAdapter相结合来实现。
首先看一下今天要实现的效果
可能有些人不会使用第三方库,接下来我们来看一下如何使用
1. github上搜索viewpagerIndicator: https://github.com/JakeWharton/ViewPagerIndicator
2. 下载zip包,解压,eclipse中import->Android Existing
Code->(注意只导入解压后下面的Library)
3. 导入后标记为Property->Android->isLibrary
4. 将indicator下面的libs下的support-v4的jar包copy到主项目文件下的libs覆盖,否则会报version
mismatch
5. 在主项目中property->Android->AddLibrary添加进来
6. ctrl+Alt+T试着将TabPagexxx的class搜索出来,说明项目已经成功导入
接下来就是顶部布局top.xml的实现
接下来为四个Fragment共用一个布局文件,如果你想实现每个布局文件里面又有不同的布局,参照实现微信布局的前三种方法即可,在不同的布局文件里面添加不同的按钮等等各种信息,由于这里实现的功能较为简单,四个Fragment共用一个。其代码如下
在接下来就是整体布局,整体布局要注意:需要使用我们的指示器,所以要将其包含在内,这与第一种略有不同
其代码如下
接下来创建四个Fragment.java的公共类
在接下来为四个Fragment创建FragmentPagerAdapter
最后在MainActivity.java类中,加载四个Fragment,并实现相应的功能。
有以上实现的过程可以看到用了第三方库:指示器,不需要自己再去写tab简化了代码。。
有的同学可能会报错
\res\values\styles.xml:29: error: Error retrieving parent for item: No resource found that matches the given name 'Widget'.
可能是你的路径没有对
首先看一下今天要实现的效果
可能有些人不会使用第三方库,接下来我们来看一下如何使用
1. github上搜索viewpagerIndicator: https://github.com/JakeWharton/ViewPagerIndicator
2. 下载zip包,解压,eclipse中import->Android Existing
Code->(注意只导入解压后下面的Library)
3. 导入后标记为Property->Android->isLibrary
4. 将indicator下面的libs下的support-v4的jar包copy到主项目文件下的libs覆盖,否则会报version
mismatch
5. 在主项目中property->Android->AddLibrary添加进来
6. ctrl+Alt+T试着将TabPagexxx的class搜索出来,说明项目已经成功导入
接下来就是顶部布局top.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="wrap_content" android:background="#58ACED" android:gravity="center_vertical" android:orientation="horizontal" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/idx_logo" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="imooc" android:textColor="#ffffff" android:layout_marginLeft="3dp" android:textSize="20sp" android:textStyle="bold" /> </LinearLayout>
接下来为四个Fragment共用一个布局文件,如果你想实现每个布局文件里面又有不同的布局,参照实现微信布局的前三种方法即可,在不同的布局文件里面添加不同的按钮等等各种信息,由于这里实现的功能较为简单,四个Fragment共用一个。其代码如下
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:background="#ffffff" android:layout_height="match_parent" > <TextView android:id="@+id/id_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textStyle="bold" android:textSize="22sp" android:text="helloworld" /> </RelativeLayout>
在接下来就是整体布局,整体布局要注意:需要使用我们的指示器,所以要将其包含在内,这与第一种略有不同
其代码如下
<LinearLayout 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="#C5DAED" android:orientation="vertical" > <include layout="@layout/top" /> <com.viewpagerindicator.TabPageIndicator android:id="@+id/id_indicator" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@android:color/transparent" > </com.viewpagerindicator.TabPageIndicator> <android.support.v4.view.ViewPager android:id="@+id/id_viewpager" android:layout_width="fill_parent" android:layout_height="fill_parent" > </android.support.v4.view.ViewPager> </LinearLayout>
接下来创建四个Fragment.java的公共类
package com.imooc.tab04; import android.annotation.SuppressLint; 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.TextView; @SuppressLint("ValidFragment") public class TabFragment extends Fragment { private int pos; @SuppressLint("ValidFragment") public TabFragment(int pos) { this.pos = pos; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.frag, container, false); TextView tv = (TextView) view.findViewById(R.id.id_tv); tv.setText(TabAdapter.TITLES[pos]); return view; } }
在接下来为四个Fragment创建FragmentPagerAdapter
package com.imooc.tab04; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; public class TabAdapter extends FragmentPagerAdapter { public static String[] TITLES = new String[] { "课程", "问答", "求课", "学习", "计划" }; public TabAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int arg0) { TabFragment fragment = new TabFragment(arg0); return fragment; } @Override public int getCount() { return TITLES.length; } @Override public CharSequence getPageTitle(int position) { return TITLES[position]; } }
最后在MainActivity.java类中,加载四个Fragment,并实现相应的功能。
package com.imooc.tab04; import java.util.List; import android.app.Fragment; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.view.Window; import com.viewpagerindicator.TabPageIndicator; public class MainActivity extends FragmentActivity { private ViewPager mViewPager; private TabPageIndicator mTabPageIndicator; private TabAdapter mAdapter ; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initView(); } private void initView() { mViewPager = (ViewPager) findViewById(R.id.id_viewpager); mTabPageIndicator = (TabPageIndicator) findViewById(R.id.id_indicator); mAdapter = new TabAdapter(getSupportFragmentManager()); mViewPager.setAdapter(mAdapter); mTabPageIndicator.setViewPager(mViewPager, 0); } }
有以上实现的过程可以看到用了第三方库:指示器,不需要自己再去写tab简化了代码。。
有的同学可能会报错
<style name="MyWidget.TabPageIndicator" parent="Widget">这个会报错?
\res\values\styles.xml:29: error: Error retrieving parent for item: No resource found that matches the given name 'Widget'.可能是你的路径没有对
相关文章推荐
- php 图片添加文字水印 以及 图片合成(微信快码传播)
- android实现微信网页浏览、QQ下拉效果SlidingLayout
- 实现微信布局的四种方式(三)
- android仿微信朋友圈上传,下载图片源码
- Android 仿微信群聊头像
- 微信学习_02_开发模式接入
- nrf51822微信--MD5
- nrf51822连接微信---crc32计算
- 微信公众平台、开放平台、智能平台区别
- 微信第三方授权流程:获取公众信息
- 微信支付中容易出错的问题 支付回调不成功
- PC上对限制在微信客户端访问的html页面进行调试
- 【iOS】集成支付宝支付/银联支付/微信支付
- 实现微信布局的四种方式(二)
- 微信支付Native扫码支付模式二之CodeIgniter集成篇
- OD调试一个小程序的思考总结
- iOS开发之微信自动抢红包功能
- 微信公众号支付失败的各种原因
- discuz 微信扫描论坛二维码提示“接口错误(ERR05)”
- 微信公众号如何做情感营销?