Android 使用Fragment,ViewPagerIndicator 制作csdn app主要框架-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

Android 使用Fragment,ViewPagerIndicator 制作csdn app主要框架

简介:

转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23513993

本来准备下载个CSDN的客户端放手机上,没事可以浏览浏览资讯,下载了官方的之后,发现并不能很好的使用。恰好搜到一个大神自己写的csdn的app,下载安装了一下,感觉很不错,也很流畅,基本满足了我们 日常浏览的需求。

app效果图:








我会在博客中完整的介绍这个项目的制作,第一篇当然是整个项目的整体结构了。

效果图:


1、头部的布局文件,这个很简单:
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:background="@color/light_blue"  
  6.     android:orientation="horizontal" >  
  7.   
  8.   
  9.     <ImageView  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_gravity="center_vertical"  
  13.         android:layout_marginLeft="8dp"  
  14.         android:layout_marginRight="4dp"  
  15.         android:src="@drawable/biz_navigation_tab_news_pressed" />  
  16.   
  17.   
  18.     <ImageView  
  19.         android:layout_width="wrap_content"  
  20.         android:layout_height="wrap_content"  
  21.         android:layout_gravity="center_vertical"  
  22.         android:layout_marginLeft="4dp"  
  23.         android:layout_marginRight="4dp"  
  24.         android:src="@drawable/base_action_bar_back_divider" />  
  25.   
  26.   
  27.     <TextView  
  28.         android:id="@+id/headTV"  
  29.         android:layout_width="0dp"  
  30.         android:layout_height="wrap_content"  
  31.         android:layout_gravity="center_vertical"  
  32.         android:layout_marginLeft="4dp"  
  33.         android:layout_weight="1"  
  34.         android:text="CSDN资讯"  
  35.         android:textColor="@color/white"  
  36.         android:textSize="21sp"  
  37.         android:textStyle="bold" >  
  38.     </TextView>  
  39.   
  40.   
  41.   
  42.   
  43. </LinearLayout>  


就显示一个图标和标题。
2、主布局文件:
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#eee"  
  6.     android:orientation="vertical" >  
  7.   
  8.   
  9.     <include layout="@layout/main_head" />  
  10.   
  11.   
  12.     <com.viewpagerindicator.TabPageIndicator  
  13.         android:id="@+id/id_indicator"  
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:background="@color/transparentblue" >  
  17.     </com.viewpagerindicator.TabPageIndicator>  
  18.   
  19.   
  20.     <android.support.v4.view.ViewPager  
  21.         android:id="@+id/id_pager"  
  22.         android:layout_width="fill_parent"  
  23.         android:layout_height="0dp"  
  24.         android:layout_weight="1" />  
  25.   
  26.   
  27. </LinearLayout>  


一个TabPageIndicator和一个ViewPager。
3、主Activity
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. package com.zhy.csdndemo;  
  2.   
  3.   
  4. import com.viewpagerindicator.TabPageIndicator;  
  5.   
  6.   
  7. import android.os.Bundle;  
  8. import android.support.v4.app.FragmentActivity;  
  9. import android.support.v4.app.FragmentPagerAdapter;  
  10. import android.support.v4.view.ViewPager;  
  11.   
  12.   
  13. public class MainActivity extends FragmentActivity  
  14. {  
  15.     private TabPageIndicator mIndicator ;  
  16.     private ViewPager mViewPager ;  
  17.     private FragmentPagerAdapter mAdapter ;  
  18.   
  19.   
  20.     @Override  
  21.     protected void onCreate(Bundle savedInstanceState)  
  22.     {  
  23.         super.onCreate(savedInstanceState);  
  24.         setContentView(R.layout.activity_main);  
  25.       
  26.         mIndicator = (TabPageIndicator) findViewById(R.id.id_indicator);  
  27.         mViewPager = (ViewPager) findViewById(R.id.id_pager);  
  28.         mAdapter = new TabAdapter(getSupportFragmentManager());  
  29.         mViewPager.setAdapter(mAdapter);  
  30.         mIndicator.setViewPager(mViewPager, 0);  
  31.           
  32.           
  33.           
  34.     }  
  35.       
  36.       
  37.   
  38.   
  39. }  


TabAdapter.java
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. package com.zhy.csdndemo;  
  2.   
  3.   
  4. import android.support.v4.app.Fragment;  
  5. import android.support.v4.app.FragmentManager;  
  6. import android.support.v4.app.FragmentPagerAdapter;  
  7.   
  8.   
  9. public class TabAdapter extends FragmentPagerAdapter  
  10. {  
  11.   
  12.   
  13.     public static final String[] TITLES = new String[] { "业界""移动""研发""程序员杂志""云计算" };  
  14.   
  15.   
  16.     public TabAdapter(FragmentManager fm)  
  17.     {  
  18.         super(fm);  
  19.     }  
  20.   
  21.   
  22.     @Override  
  23.     public Fragment getItem(int arg0)  
  24.     {  
  25.         MainFragment fragment = new MainFragment(arg0);  
  26.         return fragment;  
  27.     }  
  28.   
  29.   
  30.     @Override  
  31.     public CharSequence getPageTitle(int position)  
  32.     {  
  33.         return TITLES[position % TITLES.length];  
  34.     }  
  35.   
  36.   
  37.     @Override  
  38.     public int getCount()  
  39.     {  
  40.         return TITLES.length;  
  41.     }  
  42.   
  43.   
  44. }  

MainFragment.java

[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. package com.zhy.csdndemo;  
  2.   
  3.   
  4. import android.annotation.SuppressLint;  
  5. import android.os.Bundle;  
  6. import android.support.v4.app.Fragment;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.view.ViewGroup;  
  10. import android.widget.TextView;  
  11.   
  12.   
  13. @SuppressLint("ValidFragment")  
  14. public class MainFragment extends Fragment  
  15. {  
  16.   
  17.   
  18.     private int newsType = 0;  
  19.   
  20.   
  21.     public MainFragment(int newsType)  
  22.     {  
  23.         this.newsType = newsType;  
  24.     }  
  25.   
  26.   
  27.     @Override  
  28.     public void onActivityCreated(Bundle savedInstanceState)  
  29.     {  
  30.         super.onActivityCreated(savedInstanceState);  
  31.     }  
  32.   
  33.   
  34.     @Override  
  35.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
  36.     {  
  37.         View view = inflater.inflate(R.layout.tab_item_fragment_main, null);  
  38.         TextView tip = (TextView) view.findViewById(R.id.id_tip);  
  39.         tip.setText(TabAdapter.TITLES[newsType]);  
  40.         return view;  
  41.     }  
  42.   
  43.   
  44. }  



4、在styles.xml中自定义Theme
 
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <style name="MyTheme" parent="AppBaseTheme">  
  2.         <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>  
  3.         <item name="android:windowBackground">@drawable/init_pic</item>  
  4.         <item name="android:windowNoTitle">true</item>    
  5.         <item name="android:animationDuration">5000</item>  
  6.         <item name="android:windowContentOverlay">@null</item>    
  7.     </style>  
  8.       
  9.     <style name="MyWidget.TabPageIndicator" parent="Widget">  
  10.         <item name="android:gravity">center</item>  
  11.         <item name="android:background">@drawable/vpi__tab_indicator</item>  
  12.         <item name="android:paddingLeft">22dip</item>  
  13.         <item name="android:paddingRight">22dip</item>  
  14.         <item name="android:paddingTop">8dp</item>  
  15.         <item name="android:paddingBottom">8dp</item>  
  16.         <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>  
  17.         <item name="android:textSize">16sp</item>  
  18.         <item name="android:maxLines">1</item>  
  19.     </style>  
  20.   
  21.   
  22.     <style name="MyTextAppearance.TabPageIndicator" parent="Widget">  
  23.         <item name="android:textStyle">bold</item>  
  24.         <item name="android:textColor">@color/black</item>  
  25.     </style>  


在AndroidManifest中注册使用:
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     package="com.zhy.csdndemo"  
  4.     android:versionCode="1"  
  5.     android:versionName="1.0" >  
  6.   
  7.   
  8.     <uses-sdk  
  9.         android:minSdkVersion="13"  
  10.         android:targetSdkVersion="17" />  
  11.   
  12.   
  13.     <application  
  14.         android:allowBackup="true"  
  15.         android:icon="@drawable/ic_launcher"  
  16.         android:label="@string/app_name"  
  17.         android:theme="@style/AppTheme" >  
  18.         <activity  
  19.             android:name="com.zhy.csdndemo.MainActivity"  
  20.             android:label="@string/app_name"   
  21.             android:theme="@style/MyTheme">  
  22.             <intent-filter>  
  23.                 <action android:name="android.intent.action.MAIN" />  
  24.   
  25.   
  26.                 <category android:name="android.intent.category.LAUNCHER" />  
  27.             </intent-filter>  
  28.         </activity>  
  29.     </application>  
  30.   
  31.   
  32. </manifest>  




总体还是很简单的,但是效果很不错啊,现在不是流行Fragment么~好了 ,如果这篇文章对你有帮助,赞一个~


源码点击此处下载

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章