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

DamarisZ02 8年前

来自: http://blog.csdn.net/lmj623565791/article/details/23513993


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

app效果图:








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

效果图:


1、头部的布局文件,这个很简单:
<?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="@color/light_blue"      android:orientation="horizontal" >          <ImageView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center_vertical"          android:layout_marginLeft="8dp"          android:layout_marginRight="4dp"          android:src="@drawable/biz_navigation_tab_news_pressed" />          <ImageView          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_gravity="center_vertical"          android:layout_marginLeft="4dp"          android:layout_marginRight="4dp"          android:src="@drawable/base_action_bar_back_divider" />          <TextView          android:id="@+id/headTV"          android:layout_width="0dp"          android:layout_height="wrap_content"          android:layout_gravity="center_vertical"          android:layout_marginLeft="4dp"          android:layout_weight="1"          android:text="CSDN资讯"          android:textColor="@color/white"          android:textSize="21sp"          android:textStyle="bold" >      </TextView>          </LinearLayout>


就显示一个图标和标题。
2、主布局文件:
<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="#eee"      android:orientation="vertical" >          <include layout="@layout/main_head" />          <com.viewpagerindicator.TabPageIndicator          android:id="@+id/id_indicator"          android:layout_width="fill_parent"          android:layout_height="wrap_content"          android:background="@color/transparentblue" >      </com.viewpagerindicator.TabPageIndicator>          <android.support.v4.view.ViewPager          android:id="@+id/id_pager"          android:layout_width="fill_parent"          android:layout_height="0dp"          android:layout_weight="1" />      </LinearLayout>


一个TabPageIndicator和一个ViewPager。
3、主Activity
package com.zhy.csdndemo;      import com.viewpagerindicator.TabPageIndicator;      import android.os.Bundle;  import android.support.v4.app.FragmentActivity;  import android.support.v4.app.FragmentPagerAdapter;  import android.support.v4.view.ViewPager;      public class MainActivity extends FragmentActivity  {   private TabPageIndicator mIndicator ;   private ViewPager mViewPager ;   private FragmentPagerAdapter mAdapter ;       @Override   protected void onCreate(Bundle savedInstanceState)   {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);       mIndicator = (TabPageIndicator) findViewById(R.id.id_indicator);    mViewPager = (ViewPager) findViewById(R.id.id_pager);    mAdapter = new TabAdapter(getSupportFragmentManager());    mViewPager.setAdapter(mAdapter);    mIndicator.setViewPager(mViewPager, 0);               }            }


TabAdapter.java
package com.zhy.csdndemo;      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 final String[] TITLES = new String[] { "业界", "移动", "研发", "程序员杂志", "云计算" };       public TabAdapter(FragmentManager fm)   {    super(fm);   }       @Override   public Fragment getItem(int arg0)   {    MainFragment fragment = new MainFragment(arg0);    return fragment;   }       @Override   public CharSequence getPageTitle(int position)   {    return TITLES[position % TITLES.length];   }       @Override   public int getCount()   {    return TITLES.length;   }      }

MainFragment.java

package com.zhy.csdndemo;      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 MainFragment extends Fragment  {       private int newsType = 0;       public MainFragment(int newsType)   {    this.newsType = newsType;   }       @Override   public void onActivityCreated(Bundle savedInstanceState)   {    super.onActivityCreated(savedInstanceState);   }       @Override   public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)   {    View view = inflater.inflate(R.layout.tab_item_fragment_main, null);    TextView tip = (TextView) view.findViewById(R.id.id_tip);    tip.setText(TabAdapter.TITLES[newsType]);    return view;   }      }



4、在styles.xml中自定义Theme
 
<style name="MyTheme" parent="AppBaseTheme">          <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>          <item name="android:windowBackground">@drawable/init_pic</item>          <item name="android:windowNoTitle">true</item>            <item name="android:animationDuration">5000</item>          <item name="android:windowContentOverlay">@null</item>        </style>            <style name="MyWidget.TabPageIndicator" parent="Widget">          <item name="android:gravity">center</item>          <item name="android:background">@drawable/vpi__tab_indicator</item>          <item name="android:paddingLeft">22dip</item>          <item name="android:paddingRight">22dip</item>          <item name="android:paddingTop">8dp</item>          <item name="android:paddingBottom">8dp</item>          <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>          <item name="android:textSize">16sp</item>          <item name="android:maxLines">1</item>      </style>          <style name="MyTextAppearance.TabPageIndicator" parent="Widget">          <item name="android:textStyle">bold</item>          <item name="android:textColor">@color/black</item>      </style>


在AndroidManifest中注册使用:
<?xml version="1.0" encoding="utf-8"?>  <manifest xmlns:android="http://schemas.android.com/apk/res/android"      package="com.zhy.csdndemo"      android:versionCode="1"      android:versionName="1.0" >          <uses-sdk          android:minSdkVersion="13"          android:targetSdkVersion="17" />          <application          android:allowBackup="true"          android:icon="@drawable/ic_launcher"          android:label="@string/app_name"          android:theme="@style/AppTheme" >          <activity              android:name="com.zhy.csdndemo.MainActivity"              android:label="@string/app_name"               android:theme="@style/MyTheme">              <intent-filter>                  <action android:name="android.intent.action.MAIN" />                      <category android:name="android.intent.category.LAUNCHER" />              </intent-filter>          </activity>      </application>      </manifest>




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


源码点击此处下载