MyBasketball 第一篇

  想做一个自己的篮球新闻APP，看了大神鸿洋_的CSDN客户端制作，想学着也做一个。

   第一步体现了主题框架：TabPageIndicator体现头部tab切换。内容用viewpage和fragment组成。

  

项目结构：

布局文件：

    主布局：

<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="#ffffff"
    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"
        
         >
    </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>

   top:

<?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="#C01D1D"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我们的篮球"
        android:textColor="#ffffff"
        android:layout_marginLeft="120dp"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>

MainActivity ：

  

package com.example.mybasketball.activity;

import java.util.ArrayList;
import java.util.List;

import com.example.mybasketball.R;
import com.example.mybasketball.adpater.TabAdapter;
import com.example.mybasketball.fragment.ChinaFragment;
import com.example.mybasketball.fragment.DateFragment;
import com.example.mybasketball.fragment.NbaFragment;
import com.example.mybasketball.fragment.SkillFragment;
import com.example.mybasketball.fragment.VideoFragment;
import com.viewpagerindicator.TabPageIndicator;

import android.app.Activity;
import android.graphics.pdf.PdfDocument.PageInfo;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import android.view.MenuItem;
import android.view.Window;

/**
 * 
 * @author Administrator
 *没在androidManifest里注册theme
 */
public class MainActivity extends FragmentActivity {
	private ViewPager mViewPager;
	private TabPageIndicator mTabPageIndicator;
	private TabAdapter mTabAdapter;
	private List<Fragment> mFragments;
	private List<String> titles;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);//要放在setContentView前面
        setContentView(R.layout.activity_main);
       
        
        initView();
        initData();
        mTabAdapter = new TabAdapter(getSupportFragmentManager(),mFragments,titles);
        mViewPager.setAdapter(mTabAdapter);
        
        mTabPageIndicator.setViewPager(mViewPager, 0);
    }

	private void initData() {
		// TODO Auto-generated method stub
//		String[] title = {"NBA","中国篮球","技巧","同城约球","视频"};
//		for(int i=0;i<5;i++){
//			titles.add(title[i]);
//		}
		//没有加titles = new ArrayList<String>();和mFragments = new ArrayList<Fragment>();
		//没有实例化
		titles = new ArrayList<String>();
		titles.add("NBA");
		titles.add("中国篮球");
		titles.add("技巧");
		titles.add("同城约球");
		titles.add("视频");
		
		mFragments = new ArrayList<Fragment>();
		mFragments.add(new NbaFragment());
		mFragments.add(new ChinaFragment());
		mFragments.add(new SkillFragment());
		mFragments.add(new DateFragment());
		mFragments.add(new VideoFragment());
	}

	private void initView() {
		// TODO Auto-generated method stub
		mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
		mTabPageIndicator = (TabPageIndicator) findViewById(R.id.id_indicator);
	}



}

TabAdapter：

package com.example.mybasketball.adpater;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class TabAdapter extends FragmentPagerAdapter {
	private List<Fragment> mFragments;
	private List<String> titles;
	
	public TabAdapter(FragmentManager fm,List<Fragment> mFragments,List<String> titles) {
		super(fm);
		this.mFragments = mFragments;
		this.titles = titles;
	}

	@Override
	public Fragment getItem(int arg0) {
		// TODO Auto-generated method stub
		return mFragments.get(arg0);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return mFragments.size();
	}
    @Override
    public CharSequence getPageTitle(int position) {
    	// TODO Auto-generated method stub
//    	return titles.get(position);
    	 return titles.get(position);
    }
}

  fragement内容现在很简单，只有一个textview，布局和fragment代码就不贴了

 

   TabPageIndicator的样式：

  

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.

    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.

        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>

    <style name="MyTheme" parent="AppBaseTheme">
        <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:animationDuration">5000</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
<!--  android:background去掉就可以去掉下划线  -->
    <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>
        <item name="android:showDividers">middle</item>  
    </style>

    <style name="MyTextAppearance.TabPageIndicator" parent="Widget">
        <item name="android:textStyle">bold</item>
        <item name="android:textColor">@drawable/viewpager_title_textcolor</item>
       
    </style>

</resources>

    原来的TabPageIndicator切换字体的颜色是不会变得，要加上这个：

 <item name="android:textColor">@drawable/viewpager_title_textcolor</item>

   viewpager_title_textcolor：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <!-- Non focused states -->  
    <item android:state_focused="false" android:state_pressed="false" android:state_selected="false" android:color="#000000"/>  
    <item android:state_focused="false" android:state_pressed="false" android:state_selected="true" android:color="#C01D1D"/>  
  
    <!-- Focused states -->  
    <item android:state_focused="true" android:state_pressed="false" android:state_selected="false" android:color="#000000"/>  
    <item android:state_focused="true" android:state_pressed="false" android:state_selected="true" android:color="#C01D1D"/>  
  
    <!-- Pressed -->  
    <item android:state_pressed="true" android:color="#C01D1D"/>  

</selector>

    

    接下来要完成fragment内容的填充，用网上的数据