既然是要实现ActionBar,那么第一步当然就是编辑menu目录下的main.xml文件了,代码如下所示:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity" >
<item
android:id="@+id/action_search"
android:actionViewClass="android.widget.SearchView"
android:icon="@drawable/actionbar_search_icon"
android:showAsAction="ifRoom|collapseActionView"
android:title="@string/action_search"/>
<item
android:id="@+id/action_my_travels"
android:icon="@drawable/actionbar_add_icon"
android:showAsAction="ifRoom"
android:title="@string/action_my_travels"/>
<item android:id="@+id/action_offline_browse"
android:title="@string/action_offline_browse"
android:showAsAction="never" />
<item android:id="@+id/action_feedback"
android:title="@string/action_feedback"
android:showAsAction="never" />
<item android:id="@+id/action_settings"
android:title="@string/action_settings"
android:showAsAction="never" />
<item android:id="@+id/action_photo_test"
android:title="@string/action_photo_test"
android:showAsAction="never" />
</menu>
PagerSlidingTabStrip是GitHub上的一个开源框架,由Andreas Stuetz编写,它可以完成和ActionBar Tab基本类似的功能,不过由于是完全开源的,我们可以随意修改其中的代码,因而扩展性非常好。
之后是activity_main的代码:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.francis.changtravels.utils.PagerSlidingTabStrip
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="40dp" />
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tabs" />
</RelativeLayout>
比较简单,其中放置了两个控件,PagerSlidingTabStrip在最顶部,ViewPager在PagerSlidingTabStrip的下面。
接着创建TravelsFragment、SubjectFragment、DestinationFragment,分别对应着游记、专题、目的地这三个界面,Fragment中只需放置一个TextView用于表示这个界面即可,TravesFragment(SubjectFragment、DestinationFragment就不说啦)如下所示:
package com.francis.changtravels.fragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.TextView;
import com.francis.changtravels.R;
/**
* Created by Francis on 14-9-18.
*/
public class TravelsFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.photo_wall_falls_demo,container,false);
return rootView;
}
}
其中photo_wall_falls_demo是自定义的布局,这里先不赘述(主要是讲ViewPager嘛)
最后修改MainActivity中的代码,加入PagerSlidingTabStrip的配置,如下所示:
package com.francis.changtravels.activity;
import java.lang.reflect.Field;
import java.lang.reflect.Method;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewConfiguration;
import android.view.Window;
import com.francis.changtravels.utils.PagerSlidingTabStrip;
import com.francis.changtravels.fragment.DestinationFragment;
import com.francis.changtravels.R;
import com.francis.changtravels.fragment.SubjectFragment;
import com.francis.changtravels.fragment.TravelsFragment;
public class MainActivity extends FragmentActivity {
/**
* 游记界面的Fragment
*/
private TravelsFragment travelsFragment;
/**
* 专题界面的Fragment
*/
private SubjectFragment subjectFragment;
/**
* 目的地界面的Fragment
*/
private DestinationFragment destinationFragment;
/**
* PagerSlidingTabStrip的实例
*/
private PagerSlidingTabStrip tabs;
/**
* 获取当前屏幕的密度
*/
private DisplayMetrics dm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setOverflowShowingAlways();
dm = getResources().getDisplayMetrics();
ViewPager pager = (ViewPager) findViewById(R.id.pager);
tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
// 为ViewPager实例添加自定义的Adapter
pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
// 将ViewPager的实例设置到了PagerSlidingTabStrip中
tabs.setViewPager(pager);
// 对PagerSlidingTabStrip的细节进行配置
setTabsValue();
}
/**
* 对PagerSlidingTabStrip的各项属性进行赋值。
*/
private void setTabsValue() {
// 设置Tab是自动填充满屏幕的
tabs.setShouldExpand(true);
// 设置Tab的分割线是透明的
tabs.setDividerColor(Color.TRANSPARENT);
// 设置Tab底部线的高度
tabs.setUnderlineHeight((int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 1, dm));
// 设置Tab Indicator的高度
tabs.setIndicatorHeight((int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 4, dm));
// 设置Tab标题文字的大小
tabs.setTextSize((int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, dm));
// 设置Tab Indicator的颜色
tabs.setIndicatorColor(Color.parseColor("#45c01a"));
// 设置选中Tab文字的颜色 (这是我自定义的一个方法)
tabs.setSelectedTextColor(Color.parseColor("#45c01a"));
// 取消点击Tab时的背景色
tabs.setTabBackground(0);
}
public class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
private final String[] titles = { "游记", "专题", "目的地" };
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
@Override
public int getCount() {
return titles.length;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
if (travelsFragment == null) {
travelsFragment = new TravelsFragment();
}
return travelsFragment;
case 1:
if (subjectFragment == null) {
subjectFragment = new SubjectFragment();
}
return subjectFragment;
case 2:
if (destinationFragment == null) {
destinationFragment = new DestinationFragment();
}
return destinationFragment;
default:
return null;
}
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
return false;
}
@Override
public boolean onMenuOpened(int featureId, Menu menu) {
if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {
if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
try {
Method m = menu.getClass().getDeclaredMethod(
"setOptionalIconsVisible", Boolean.TYPE);
m.setAccessible(true);
m.invoke(menu, true);
} catch (Exception e) {
}
}
}
return super.onMenuOpened(featureId, menu);
}
private void setOverflowShowingAlways() {
try {
ViewConfiguration config = ViewConfiguration.get(this);
Field menuKeyField = ViewConfiguration.class
.getDeclaredField("sHasPermanentMenuKey");
menuKeyField.setAccessible(true);
menuKeyField.setBoolean(config, false);
} catch (Exception e) {
e.printStackTrace();
}
}
}
效果如图:
在游记的Fragment中,使用了不规则的瀑布流,关于瀑布流的使用请参考下一篇博文。