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内容的填充，用网上的数据