本文介绍了一种使用FragmentTabHost实现的安卓应用页面框架，并详细展示了如何通过自定义实现更灵活的页面切换效果。此外，文章还介绍了Toolbar的高级定制方法，以及一个强大的轮播图组件AndroidImageSlide的具体应用。
一.FragmentTabhost实现页面框架
1.xml文件 fragmentTabHost因为涉及到切换时会重新更换状态,导致ui刷新和数据更新,所以自定义FragmentTabhost,对Aetach 和 detach改写为show和hide,
可以解决(或者,复用fragmentTabhost对象,)
<FrameLayout
android:id="@+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></FrameLayout>
<com.example.laoluo.play.widget.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white">
<FrameLayout
android:id="@+id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"></FrameLayout>
</com.example.laoluo.play.widget.FragmentTabHost>2.设置FragmentTabHost
public class MainActivity extends AppCompatActivity {
private FragmentTabHost tabHost;
private List<Tab> mTabs = new ArrayList<Tab>();//tab集合
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initTab();
initToolbar();
}
private void initToolbar() {
final CnToolbar cntoolbar = (CnToolbar)findViewById(R.id.cntoolbar);
//点击事件
cntoolbar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
cntoolbar.showSearchView();
cntoolbar.hideTitleView();
}
});
}
public void initTab() {
Tab tab_home = new Tab(HomeFragment.class, R.string.home, R.drawable.selector_icon_home);
Tab tab_hot = new Tab(HotFragment.class, R.string.hot, R.drawable.selector_icon_hot);
Tab tab_category = new Tab(CategoryFragment.class, R.string.catagory, R.drawable.selector_icon_category);
Tab tab_cart = new Tab(CartFragment.class, R.string.cart, R.drawable.selector_icon_cart);
Tab tab_mine = new Tab(MineFragment.class, R.string.mine, R.drawable.selector_icon_mine);
mTabs.add(tab_home);
mTabs.add(tab_hot);
mTabs.add(tab_category);
mTabs.add(tab_cart);
mTabs.add(tab_mine);
tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);//1.查找tabHost
tabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);//2.设置Fragment 和 content
for (Tab tab : mTabs) {
TabHost.TabSpec tabSpec = tabHost.newTabSpec(getString(tab.getTitle()));//设置标签
tabSpec.setIndicator(buildIndicator(tab));//设置View
tabHost.addTab(tabSpec, tab.getFragment(), null);
}
}
//设置Indicator
private View buildIndicator(Tab tab) {
View view = View.inflate(this, R.layout.tab_indicator, null);
ImageView imageView = (ImageView) view.findViewById(R.id.icon_tab);
TextView textView = (TextView) view.findViewById(R.id.txt_indicator);
textView.setText(tab.getTitle());
imageView.setBackgroundResource(tab.getIcon());
return view;
}
}
3.5个tab标签javabean文件
public class Tab {
private int title;
private int icon;
private Class fragment;
public Tab(Class fragment, int title, int icon) {
this.title = title;
this.icon = icon;
this.fragment = fragment;
}
public int getTitle() {
return title;
}
public void setTitle(int title) {
this.title = title;
}
public int getIcon() {
return icon;
}
public void setIcon(int icon) {
this.icon = icon;
}
public Class getFragment() {
return fragment;
}
public void setFragment(Class fragment) {
this.fragment = fragment;
}
}二.Toolbar的使用及自定义Toolbar
1.使用toolbar 标题和 按钮需要设置命名空间
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:navigationIcon="@mipmap/icon_discover"
app:title="标题">
</android.support.v7.widget.Toolbar> <!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat">
<!-- Customize your theme here. -->
<!--<item name="colorPrimary">@color/colorPrimary</item>-->
<!--<item name="colorPrimaryDark">@color/colorPrimaryDark</item>-->
<!--<item name="colorAccent">@color/colorAccent</item>-->
<!-- 设置toolbar的背景，状态栏颜色 文字颜色 -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="android:textColorPrimary">@color/white</item>
<item name="android:windowActionBar">false</item>//隐藏actionbar
<item name="android:windowNoTitle">true</item>//没有标题
<!-- 使用 API Level 22 編譯的話，要拿掉前綴字,设置没有actionbar，设置没有title -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>3.自定义toolbar(可以自定义View）
①.xml文件
<com.example.laoluo.play.widget.CnToolbar
android:id="@+id/cntoolbar"
android:layout_width="match_parent"
android:layout_height="33dp"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:isShowSearchView="true"></com.example.laoluo.play.widget.CnToolbar>
②.代码
public class CnToolbar extends Toolbar {
private LayoutInflater mInflater;
private View mView;
private TextView mTextTitle;
private EditText mSearchView;
private ImageButton mRightImageButton;
public CnToolbar(Context context) {
this(context, null);
}
public CnToolbar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CnToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
setContentInsetsRelative(10,10);//设置边距
if (attrs != null) {
//新定义属性
final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
R.styleable.CnToolbar, defStyleAttr, 0);
//右侧图片
final Drawable rightIcon = a.getDrawable(R.styleable.CnToolbar_rightButtonIcon);
if (rightIcon != null) {
//setNavigationIcon(navIcon);
setRightButtonIcon(rightIcon);
}
//是否显示搜索栏
boolean aBoolean = a.getBoolean(R.styleable.CnToolbar_isShowSearchView,false);
if(aBoolean){
showSearchView();
hideTitleView();
}else{
hideSearchView();
showTitleView();
}
a.recycle();//回收
}
}
private void initView() {
if (mView == null) {
mInflater = LayoutInflater.from(getContext());
mView = mInflater.inflate(R.layout.toolbar, null);
mTextTitle = (TextView) mView.findViewById(R.id.toolbar_title);
mSearchView = (EditText) mView.findViewById(R.id.toolbar_searchview);
mRightImageButton = (ImageButton) mView.findViewById(R.id.toolbar_rightButton);
LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
addView(mView, lp);
}
}
/*重写方法设置标题*/
@Override
public void setTitle(int resId) {
//调用下面的设置标题的方法
setTitle(getContext().getText(resId));
}
@Override
public void setTitle(CharSequence title) {
initView();//先调用父类的。默认为null调用下，就可以设置标题了
if (mTextTitle != null) {
mTextTitle.setText(title);
showTitleView();//显示标题
}
}
//设置右侧图片
public void setRightButtonIcon(Drawable rightIcon) {
if (mRightImageButton != null) {
mRightImageButton.setImageDrawable(rightIcon);
mRightImageButton.setVisibility(VISIBLE);
}
}
//监听右侧按钮的点击事件
public void setmRightImageButtonOnclickListener(OnClickListener onclickListener){
mRightImageButton.setOnClickListener(onclickListener);
}
//显示隐藏
public void showSearchView() {
if (mSearchView != null)
mSearchView.setVisibility(VISIBLE);
}
public void hideSearchView() {
if (mSearchView != null)
mSearchView.setVisibility(GONE);
}
public void showTitleView() {
if (mTextTitle != null)
mTextTitle.setVisibility(VISIBLE);
}
public void hideTitleView() {
if (mTextTitle != null)
mTextTitle.setVisibility(GONE);
}
}
三.屌炸天的炫酷轮播条(AndroidImageSlide,github大神)
按照github文档做(简单例子)
1.xml文件
<com.daimajia.slider.library.SliderLayout
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="150dp" />
<com.daimajia.slider.library.Indicators.PagerIndicator
android:id="@+id/custom_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
custom:selected_color="#FF5500"
custom:unselected_color="#55333333"
custom:shape="rect"
custom:selected_padding_left="2dp"
custom:selected_padding_right="2dp"
custom:unselected_padding_left="2dp"
custom:unselected_padding_right="2dp"
custom:selected_width="16dp"
custom:selected_height="3dp"
custom:unselected_width="16dp"
custom:unselected_height="3dp"
/>2.
/**
* 主页面
*/
public class HomeFragment extends Fragment {
private static final String TAG ="homeFragment" ;
private SliderLayout mSliderLayout;
private PagerIndicator pagerIndicator;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_home,container,false);
mSliderLayout = (SliderLayout) view.findViewById(R.id.slider);
pagerIndicator = (PagerIndicator) view.findViewById(R.id.custom_indicator);
initSlider();
return view;
}
private void initSlider(){
//设置图片及描述
TextSliderView textSliderView = new TextSliderView(this.getActivity());
textSliderView.image("http://m.360buyimg.com/mobilecms/s480x180_jfs/t2278/35/409524152/232719/1d29f7a9/56078dbfNae4f16a3.jpg");
textSliderView.description("时尚男装");
// textSliderView.setScaleType(BaseSliderView.ScaleType.Fit);
TextSliderView textSliderView2 = new TextSliderView(this.getActivity());
textSliderView2.image("http://m.360buyimg.com/mobilecms/s480x180_jfs/t2071/116/426908452/111248/3e6d388c/5608a437N723ee2ba.jpg");
textSliderView2.description("家电秒杀");
// textSliderView2.setScaleType(BaseSliderView.ScaleType.Fit);
TextSliderView textSliderView3 = new TextSliderView(this.getActivity());
textSliderView3.image("http://m.360buyimg.com/mobilecms/s480x180_jfs/t2113/230/413819408/114393/d8a62616/56078bacN9c9c6dc8.jpg");
textSliderView3.description("机器狂勾");
// textSliderView3.setScaleType(BaseSliderView.ScaleType.Fit);
//添加每一个slider
mSliderLayout.addSlider(textSliderView);
mSliderLayout.addSlider(textSliderView2);
mSliderLayout.addSlider(textSliderView3);
mSliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Right_Bottom);
mSliderLayout.setCustomIndicator(pagerIndicator);//设置指示器
mSliderLayout.setCustomAnimation(new DescriptionAnimation());//设置描述的动画
mSliderLayout.setPresetTransformer(SliderLayout.Transformer.RotateUp);//从下面出来
mSliderLayout.setDuration(3000);
mSliderLayout.addOnPageChangeListener(new ViewPagerEx.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
Log.d(TAG,"onPageScrolled");
}
@Override
public void onPageSelected(int i) {
Log.d(TAG,"onPageSelected");
}
@Override
public void onPageScrollStateChanged(int i) {
Log.d(TAG,"onPageScrollStateChanged");
}
});
}
@Override
public void onStop() {
mSliderLayout.stopAutoCycle();
super.onStop();
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
