您现在的位置: 365建站网 > 365学习 > Android 使用Fragment,ViewPagerIndicator 制作app主要框架教程

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

文章来源:365jz.com     点击数:190    更新时间:2017-11-29 12:11   参与评论

本来准备下载个客户端放手机上,没事可以浏览浏览资讯,下载了官方的之后,发现并不能很好的使用。恰好搜到一个大神自己写的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么~好了 ,如果这篇文章对你有帮助,赞一个~

 

源码点击此处下载

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (190人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------