[android开发之内容更新类APP]四、项目的基本功能之布局(续)

浏览数：18 / 时间：2015年06月11日

昨天才拿到电脑，不说了，都是泪

http://joveth.github.io/funny/

1.选项卡的滑动效果

要知道，用这个选项卡就是想让它滑动起来，不然的话，我才不喜欢用它呢。

在让他滑动之前，先来说一下上一张的问题，话说，按照设计器下载下来的包，替换到我们的 res之后，我发现，tabhost的选项颜色没有变，在我尝试了各种方法之后，终于，我tm放弃了，好吧，正好找到了这个滑动效果的demo，还有选项卡的颜色切换效果。

话不多说，改进我们的东西吧。

1.修改我们的 acitivity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TabHost
        android:id="@+id/tab_host"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="@drawable/tab_widget_bg" />

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <!-- 隐藏 -->

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:visibility="gone" >

                <fragment
                    android:id="@+id/fragment_image"
                    android:name="com.jov.germany.frame.ImageFrame"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />

                <fragment
                    android:id="@+id/fragment_text"
                    android:name="com.jov.germany.frame.TextFrame"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />

                <fragment
                    android:id="@+id/fragment_both"
                    android:name="com.jov.germany.frame.BothFrame"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />
            </FrameLayout>
        </LinearLayout>
    </TabHost>

</LinearLayout>

这里面添加了viewpage，还有把FramLayout隐藏了

其中的布局文件：

res/color/tab_widget_text.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- 标签页tab 文字切换颜色 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item android:state_selected="true" android:color="@color/color_orange"/>
    
    <item android:color="#000"/>
    
</selector>

value/color.xml中添加：

<color name="color_orange">#FF9224</color>

为啥是橘黄，我……如果你不喜欢，百度HTML颜色代码表，找一个你自己的最爱

在来修改我们的 MainAcitivity.java

package com.jov.germany;

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

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabContentFactory;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {
	public static final String PAGE1_ID = "page1";
	public static final String PAGE2_ID = "page2";
	public static final String PAGE3_ID = "page3";

	private TabHost tabHost; // TabHost
	private List<View> views; // ViewPager内的View对象集合
	private FragmentManager manager; // Activity管理器
	private ViewPager pager; // ViewPager

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// 初始化资源
		pager = (ViewPager) findViewById(R.id.viewpager);
		tabHost = (TabHost) findViewById(R.id.tab_host);
		manager = getSupportFragmentManager();
		views = new ArrayList<View>();

		views.add(manager.findFragmentById(R.id.fragment_image).getView());
		views.add(manager.findFragmentById(R.id.fragment_text).getView());
		views.add(manager.findFragmentById(R.id.fragment_both).getView());

		// 管理tabHost开始
		tabHost.setup();

		// 传一个空的内容给TabHost，不能用上面两个fragment
		TabContentFactory factory = new TabContentFactory() {
			@Override
			public View createTabContent(String tag) {
				return new View(MainActivity.this);
			}
		};
		// tab1
		TabSpec tabSpec = tabHost.newTabSpec(PAGE1_ID);
		tabSpec.setIndicator(createTabView(R.string.fragment_image_str));
		tabSpec.setContent(factory);
		tabHost.addTab(tabSpec);
		// tab2
		TabSpec tabSpec2 = tabHost.newTabSpec(PAGE2_ID);
		tabSpec2.setIndicator(createTabView(R.string.fragment_text_str));
		tabSpec2.setContent(factory);
		tabHost.addTab(tabSpec2);
		// tab3
		TabSpec tabSpec3 = tabHost.newTabSpec(PAGE3_ID);
		tabSpec3.setIndicator(createTabView(R.string.fragment_both_str));
		tabSpec3.setContent(factory);
		tabHost.addTab(tabSpec3);
	
		tabHost.setCurrentTab(0);
		// 管理tabHost结束

		// 设置监听器和适配器
		pager.setAdapter(new PageAdapter());
		pager.setOnPageChangeListener(new PageChangeListener());
		tabHost.setOnTabChangedListener(new TabChangeListener());
	}

	/**
	 * PageView Adapter
	 * 
	 * @author Administrator
	 * 
	 */
	private class PageAdapter extends PagerAdapter {
		@Override
		public int getCount() {
			return views.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public void destroyItem(ViewGroup view, int position, Object arg2) {
			view.removeView(views.get(position));
		}

		@Override
		public Object instantiateItem(ViewGroup view, int position) {
			try {
				if (views.get(position).getParent() == null) {
					view.addView(views.get(position));
				} else {
					((ViewGroup) views.get(position).getParent())
							.removeView(views.get(position));
					view.addView(views.get(position));
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
			return views.get(position);
		}
	}

	/**
	 * 标签页点击切换监听器
	 * 
	 * @author Administrator
	 * 
	 */
	private class TabChangeListener implements OnTabChangeListener {
		@Override
		public void onTabChanged(String tabId) {
			if (PAGE1_ID.equals(tabId)) {
				pager.setCurrentItem(0);
			} else if (PAGE2_ID.equals(tabId)) {
				pager.setCurrentItem(1);
			} else if (PAGE3_ID.equals(tabId)) {
				pager.setCurrentItem(2);
			} 
		}
	}

	/**
	 * ViewPager滑动切换监听器
	 * 
	 * @author Administrator
	 * 
	 */
	private class PageChangeListener implements OnPageChangeListener {
		@Override
		public void onPageScrollStateChanged(int arg0) {
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}

		@Override
		public void onPageSelected(int arg0) {
			tabHost.setCurrentTab(arg0);
		}
	}

	/**
	 * 创建tab View
	 * 
	 * @param string
	 * @return
	 */
	private View createTabView(int stringId) {
		View tabView = getLayoutInflater().inflate(R.layout.tab, null);
		TextView textView = (TextView) tabView.findViewById(R.id.tab_text);
		textView.setText(stringId);
		return tabView;
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}

其中的layout/tab.xml

<?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="match_parent"
    android:orientation="vertical"
    android:background="@drawable/state_tabs_bg" >
    
    <TextView 
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:layout_marginTop="11dp"
    	android:layout_gravity="center_horizontal"
    	android:textSize="18sp"
    	android:textColor="@color/tab_widget_text"/>

</LinearLayout>

drawable/state_tabs_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- tab每个标签背景 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@drawable/tabs_selected_bg" />
 
	<item android:drawable="@drawable/tabs_normal_bg"></item>

</selector>

drawable/tabs_selected_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape>
            <solid android:color="@color/color_orange" />
        </shape>
    </item>
    <item android:bottom="5dp">
        <shape>
            <solid android:color="#eeeeee" />
        </shape>
    </item>

</layer-list>

drawable/tabs_normal_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
        <shape>
            <solid android:color="@color/color_orange" />
        </shape>
    </item>
    <item android:bottom="1dp">
        <shape>
            <solid android:color="#eeeeee" />
        </shape>
    </item>

</layer-list>

好至此的话我们的代码算是ok了，但是当你运行的时候却发现跑不起来，为啥呢？？？

且看一下我们的Frame里面，修改ImageFrame.java：

package com.jov.germany.frame;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.jov.germany.R;

public class ImageFrame extends Fragment{
	 @Override  
	    public View onCreateView(LayoutInflater inflater, ViewGroup container,  
	            Bundle savedInstanceState) {  
	        return inflater.inflate(R.layout.image_frame, container, false);  
	    }  
}

你可能会觉得没什么区别，看一下我们的Fragment引用的包，不一样哦。

好吧，最后MainAcitivity.java中的String内容自己在string.xml里面自己加把