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

2021-07-23 00:52:23

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

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

app效果图：

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

效果图：

1、头部的布局文件，这个很简单：

[html] view
 plaincopy

<?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、主布局文件：

[html] view
 plaincopy

<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

[java] view
 plaincopy

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

[java] view
 plaincopy

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

[java] view
 plaincopy

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

[html] view
 plaincopy

<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中注册使用：

[html] view
 plaincopy

<?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么~好了，如果这篇文章对你有帮助，赞一个~

码农公寓

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

源码点击此处下载

码农公寓

源码点击此处下载

相关文章