自定义底部工具栏及顶部工具栏和Fragment配合使用demo
首先简单的介绍下fragment,fragment是android3.0新增的概念,其中文意思是碎片,它与activity非常相似,用来在一个activity中描述一些行为或一部分用户界面。使用锁个fragment可以再一个单独的activity中建立多个UI面板,也可以在多个activity中重用fragment,一个fragment必须被嵌入到一个activity中,它的生命周期直接受其所宿主的activity的生命周期的影响。
首先创建一个fragment,要创建一个fragment,必须创建一个fragment的子类,或者继承自另外一个已经存在的Fragment的子类,并重写相应的方法。
编写Fragment的xml文件和类文件,这里我写了四个,贴出来其中两个代码,其他的copy就行。
fragment_main.xml
- <RelativeLayout 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"
- tools:context=".MainActivity" >
- <TextView
- android:layout_height="wrap_content"
- android:layout_width="wrap_content"
- android:gravity="center"
- android:text="主页面"
- />
- </RelativeLayout>
MainFragment.java
- public class MainFragment extends Fragment{
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container,
- Bundle savedInstanceState) {
- View view = inflater.inflate(R.layout.fragment_main, container,false);
- return view;
- }
- @Override
- public void onActivityCreated(Bundle savedInstanceState) {
- super.onActivityCreated(savedInstanceState);
- }
- }
fragment_grxx.xml
- <RelativeLayout 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"
- tools:context=".MainActivity" >
- <com.qyh.view.TitleView
- android:id="@+id/title"
- android:layout_width="match_parent"
- android:layout_height="wrap_content" />
- <TextView
- android:layout_height="wrap_content"
- android:layout_width="wrap_content"
- android:gravity="center"
- android:text="个人信息"
- />
- </RelativeLayout>
GrxxFragment.java
- public class GrxxFragment extends Fragment{
- private TitleView titleView;
- private FragmentActivity mActivity;
- private View mParent;
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container,
- Bundle savedInstanceState) {
- View view = inflater.inflate(R.layout.fragment_grxx, container,false);
- return view;
- }
- @Override
- public void onActivityCreated(Bundle savedInstanceState) {
- super.onActivityCreated(savedInstanceState);
- mActivity = getActivity();
- mParent = getView();
- titleView = (TitleView) mActivity.findViewById(R.id.title);
- titleView.setTitle("个人信息");
- titleView.setBackButton(new TitleView.OnBackButtonClickListener() {
- @Override
- public void onClick(View button) {
- getFragmentManager().beginTransaction()
- .hide(com.qyh.main.MainActivity.mFragments[1])
- .show(com.qyh.main.MainActivity.mFragments[0]).commit();
- FragmentIndicator.setIndicator(0);
- }
- });
- }
- }
自定义底部工具栏
FragmentIndicator.java
- public class FragmentIndicator extends LinearLayout implements OnClickListener {
- private static String TAG = "FragmentIndicator";
- private int mDefaultIndicator = 0;// 默认位置
- private static int mCurIndicator;// 当前位置
- private static View[] mIndicators;
- private OnIndicateListener mOnIndicateListener;
- private static final String TAG_ICON_0 = "icon_tag_0";
- private static final String TAG_ICON_1 = "icon_tag_1";
- private static final String TAG_ICON_2 = "icon_tag_2";
- private static final String TAG_ICON_3 = "icon_tag_3";
- private FragmentIndicator(Context context) {
- super(context);
- }
- public FragmentIndicator(Context context, AttributeSet attrs) {
- super(context, attrs);
- mCurIndicator = mDefaultIndicator;
- setOrientation(LinearLayout.HORIZONTAL);
- initView();
- }
- private View createIndicator(int iconResID, int stringResID,
- int stringColor, String iconTag, String textTag) {
- LinearLayout view = new LinearLayout(getContext());
- view.setOrientation(LinearLayout.HORIZONTAL);
- view.setLayoutParams(new LinearLayout.LayoutParams(
- LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT,1));
- view.setGravity(Gravity.CENTER);
- ImageView iconView = new ImageView(getContext());
- iconView.setTag(iconTag);
- iconView.setLayoutParams(new LinearLayout.LayoutParams(
- LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT, 1));
- iconView.setImageResource(iconResID);
- view.addView(iconView);
- return view;
- }
- private void initView() {
- mIndicators = new View[4];
- mIndicators[0] = createIndicator(R.drawable.main_home, 0, 0, TAG_ICON_0,
- null);
- mIndicators[0].setBackgroundResource(R.drawable.indic_select);
- mIndicators[0].setTag(Integer.valueOf(0));
- mIndicators[0].setOnClickListener(this);
- addView(mIndicators[0]);
- mIndicators[1] = createIndicator(R.drawable.main_user, 0, 0, TAG_ICON_1,
- null);
- mIndicators[1].setBackgroundResource(Color.alpha(0));
- mIndicators[1].setTag(Integer.valueOf(1));
- mIndicators[1].setOnClickListener(this);
- addView(mIndicators[1]);
- mIndicators[2] = createIndicator(R.drawable.main_set, 0, 0, TAG_ICON_2,
- null);
- mIndicators[2].setBackgroundResource(Color.alpha(0));
- mIndicators[2].setTag(Integer.valueOf(2));
- mIndicators[2].setOnClickListener(this);
- addView(mIndicators[2]);
- mIndicators[3] = createIndicator(R.drawable.main_more, 0, 0,
- TAG_ICON_3, null);
- mIndicators[3].setBackgroundResource(Color.alpha(0));
- mIndicators[3].setTag(Integer.valueOf(3));
- mIndicators[3].setOnClickListener(this);
- addView(mIndicators[3]);
- }
- public static void setIndicator(int which) {
- // 以前状态
- mIndicators[mCurIndicator].setBackgroundColor(Color.alpha(0));
- ImageView prevIcon;
- switch (mCurIndicator) {
- case 0:
- prevIcon = (ImageView) mIndicators[mCurIndicator]
- .findViewWithTag(TAG_ICON_0);
- prevIcon.setImageResource(R.drawable.main_home);
- break;
- case 1:
- prevIcon = (ImageView) mIndicators[mCurIndicator]
- .findViewWithTag(TAG_ICON_1);
- prevIcon.setImageResource(R.drawable.main_user);
- break;
- case 2:
- prevIcon = (ImageView) mIndicators[mCurIndicator]
- .findViewWithTag(TAG_ICON_2);
- prevIcon.setImageResource(R.drawable.main_set);
- break;
- case 3:
- prevIcon = (ImageView) mIndicators[mCurIndicator]
- .findViewWithTag(TAG_ICON_3);
- prevIcon.setImageResource(R.drawable.main_more);
- break;
- default:
- break;
- }
- Log.i(TAG, "setIndicator:mCurIndicator=" + mCurIndicator);
- // 更新当前状态
- mIndicators[which].setBackgroundResource(R.drawable.indic_select);
- ImageView currIcon;
- switch (which) {
- case 0:
- currIcon = (ImageView) mIndicators[which]
- .findViewWithTag(TAG_ICON_0);
- currIcon.setImageResource(R.drawable.main_home_hover);// 选中后的图片
- break;
- case 1:
- currIcon = (ImageView) mIndicators[which]
- .findViewWithTag(TAG_ICON_1);
- currIcon.setImageResource(R.drawable.main_user_hover);
- break;
- case 2:
- currIcon = (ImageView) mIndicators[which]
- .findViewWithTag(TAG_ICON_2);
- currIcon.setImageResource(R.drawable.main_set_hover);
- break;
- case 3:
- currIcon = (ImageView) mIndicators[which]
- .findViewWithTag(TAG_ICON_3);
- currIcon.setImageResource(R.drawable.main_more_hover);
- break;
- default:
- break;
- }
- mCurIndicator = which;
- }
- public interface OnIndicateListener {
- public void onIndicate(View v, int which);
- }
- public void setOnIndicateListener(OnIndicateListener listener) {
- mOnIndicateListener = listener;
- }
- @Override
- public void onClick(View v) {
- if (mOnIndicateListener != null) {
- int tag = (Integer) v.getTag();
- switch (tag) {
- case 0:
- if (mCurIndicator != 0) {
- mOnIndicateListener.onIndicate(v, 0);
- setIndicator(0);
- }
- break;
- case 1:
- if (mCurIndicator != 1) {
- mOnIndicateListener.onIndicate(v, 1);
- setIndicator(1);
- }
- break;
- case 2:
- if (mCurIndicator != 2) {
- mOnIndicateListener.onIndicate(v, 2);
- setIndicator(2);
- }
- break;
- case 3:
- if (mCurIndicator != 3) {
- mOnIndicateListener.onIndicate(v, 3);
- setIndicator(3);
- }
- break;
- default:
- break;
- }
- }
- }
- }
自定义顶部工具栏
title_view.xml
- <?xml version="1.0" encoding="utf-8"?>
- <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="48dip"
- android:background="#18222E" >
- <ImageButton
- android:id="@+id/ib_back"
- android:layout_width="48dp"
- android:layout_height="match_parent"
- android:src="@drawable/ic_titleback"
- />
- <TextView
- android:id="@+id/tv_title"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_gravity="center"
- android:text="个人信息"/>
- <ImageButton
- android:id="@+id/ib_handle"
- android:layout_width="wrap_content"
- android:layout_height="match_parent"
- android:layout_gravity="right"
- android:layout_marginRight="12dp"
- android:visibility="gone"/>
- </FrameLayout>
TitleView.java
- /**
- * 功能描述:自定义顶部工具栏
- */
- public class TitleView extends FrameLayout implements View.OnClickListener {
- public OnBackButtonClickListener mOnBackButtonClickListener;
- public OnHandleButtonClickListener mHandleButtonClickListener;
- private TextView mTitle;
- private ImageButton mBackButton;
- private ImageButton ib_handle;
- public TitleView(Context context) {
- this(context, null);
- }
- public TitleView(Context context, AttributeSet attrs) {
- this(context, attrs, 0);
- }
- public TitleView(Context context, AttributeSet attrs, int defStyle) {
- super(context, attrs, defStyle);
- LayoutInflater inflater = (LayoutInflater) context
- .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
- inflater.inflate(R.layout.title_view, this, true);
- mBackButton = (ImageButton) findViewById(R.id.ib_back);
- mBackButton.setOnClickListener(this);
- mTitle = (TextView) findViewById(R.id.tv_title);
- mTitle.setVisibility(View.INVISIBLE);
- ib_handle = (ImageButton) findViewById(R.id.ib_handle);
- ib_handle.setOnClickListener(this);
- }
- public interface OnBackButtonClickListener {
- public void onClick(View button);
- }
- public interface OnHandleButtonClickListener {
- public void onClick(View button);
- }
- /**
- * 标题返回按钮
- *
- * @param listener
- */
- public void setBackButton(OnBackButtonClickListener listener) {
- mOnBackButtonClickListener = listener;
- }
- public void showBackBtn(){
- mBackButton.setVisibility(View.VISIBLE);
- }
- public void hiddenBackBtn(){
- mBackButton.setVisibility(View.GONE);
- }
- /**
- * 标题操作按钮
- *
- * @param listener
- */
- public void setHandleButton(OnHandleButtonClickListener listener) {
- mHandleButtonClickListener = listener;
- }
- public void hiddenHandleBtn(){
- ib_handle.setVisibility(View.GONE);
- }
- public void showHandleBtn(int iamgeBtnID){
- ib_handle.setImageResource(iamgeBtnID);
- ib_handle.setVisibility(View.VISIBLE);
- }
- //设置标题
- public void setTitle(String text) {
- mTitle.setVisibility(View.VISIBLE);
- mTitle.setText(text);
- }
- public void setTitle(int stringID) {
- mTitle.setVisibility(View.VISIBLE);
- mTitle.setText(stringID);
- }
- @Override
- public void onClick(View v) {
- switch (v.getId()) {
- case R.id.ib_back:
- if (mOnBackButtonClickListener != null) {
- mOnBackButtonClickListener.onClick(v);
- }
- break;
- case R.id.ib_handle:
- if (mHandleButtonClickListener != null) {
- mHandleButtonClickListener.onClick(v);
- }
- break;
- default:
- break;
- }
- }
- }
在main.xml里面添加相关fragment和自定义底部工具栏,注意name属性
- <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:orientation="vertical" >
- <fragment
- android:id="@+id/fragment_main"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="1"
- android:name="com.qyh.fragment.MainFragment" />
- <fragment
- android:id="@+id/fragment_grxx"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="1"
- android:name="com.qyh.fragment.GrxxFragment" />
- <fragment
- android:id="@+id/fragment_sz"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="1"
- android:name="com.qyh.fragment.SzFragment" />
- <fragment
- android:id="@+id/fragment_others"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="1"
- android:name="com.qyh.fragment.OthersFragment" />
- <!--此处为自定义底部菜单栏 -->
- <com.qyh.fragment.FragmentIndicator
- android:id="@+id/indicator"
- android:layout_width="fill_parent"
- android:layout_height="48dp"
- />
- </LinearLayout>
在主线程中对fragment做相关操作
- public class MainActivity extends FragmentActivity {
- public static Fragment[] mFragments;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- requestWindowFeature(Window.FEATURE_NO_TITLE);
- setContentView(R.layout.activity_main);
- setFragmentIndicator(0);
- }
- private void setFragmentIndicator(int whichIsDefault) {
- mFragments = new Fragment[4];
- mFragments[0] = getSupportFragmentManager().findFragmentById(
- R.id.fragment_main);
- mFragments[1] = getSupportFragmentManager().findFragmentById(
- R.id.fragment_grxx);
- mFragments[2] = getSupportFragmentManager().findFragmentById(
- R.id.fragment_sz);
- mFragments[3] = getSupportFragmentManager().findFragmentById(
- R.id.fragment_others);
- getSupportFragmentManager().beginTransaction().hide(mFragments[0])
- .hide(mFragments[1]).hide(mFragments[2]).hide(mFragments[3])
- .show(mFragments[whichIsDefault]).commit();
- FragmentIndicator mIndicator = (FragmentIndicator) findViewById(R.id.indicator);
- FragmentIndicator.setIndicator(whichIsDefault);
- mIndicator.setOnIndicateListener(new OnIndicateListener() {
- @Override
- public void onIndicate(View v, int which) {
- getSupportFragmentManager().beginTransaction()
- .hide(mFragments[0]).hide(mFragments[1])
- .hide(mFragments[2]).hide(mFragments[3])
- .show(mFragments[which]).commit();
- }
- });
- }
- }
运行相关效果图
自定义底部工具栏及顶部工具栏和Fragment配合使用demo的更多相关文章
- TabBottomFragmentLayout【自定义底部选项卡区域(搭配Fragment)】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义底部选项卡布局LinearLayout类,然后配合Fragment,实现切换Fragment功能. 缺点: 1.底部选项卡区域 ...
- 【Android UI设计与开发】5.底部菜单栏(二)使用Fragment实现底部菜单栏
既然 Fragment 取代了TabActivity,当然 TabActivity 的能实现的菜单栏,Fragment 当然也能实现.主要其实就是通过菜单栏的点击事件切换 Fragment 的显示和隐 ...
- Android自定义底部带有动画的Dialog
Android自定义底部带有动画的Dialog 效果图 先看效果图,是不是你想要的呢 自定义Dialog package --.view; import android.app.Dialog; imp ...
- Android 自定义底部公用菜单
注释:此案例主要展示自定义底部菜单,一处封装处处调用.使用起来相当方便 一.初始的Activity package com.example.myapi.buttommenu; import andro ...
- 微信小程序-自定义底部导航
代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- [RN] React Native 自定义 底部 弹出 选择框 实现
React Native 自定义 底部选择框 实现 效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...
- 15 Flutter BottomNavigationBar自定义底部导航条 以及实现页面切换 以及模块化
效果: /** * Flutter BottomNavigationBar 自定义底部导航条.以及实现页面切换: * BottomNavigationBar是底部导航条,可以让我们定义底部Tab ...
- C# 自定义样式实现菜单和工具栏的分割线
在做WinForm界面布局时,菜单和工具栏必不可少!但是MenuStrip和ToolStrip不能够对边框的样式直接设置,如果想实现菜单和工具栏之间的分割线就不容易实现:今天查阅了一下msdn找到了一 ...
- XAF ListView 移除顶部工具栏
此方法适用于C/S及B/S,无需分别写在web和win中. Module下新建ViewController,代码如下: public partial class GongZuoJiaoShen_Yin ...
随机推荐
- C# ~ 从 XML 到 Linq 到 Linq to XML
.XML 可扩展标记语言 (Extensible Markup Language), 标记 (markup) 是关键部分,是标准通用标记语言 (Standard Generalized Markup ...
- Java并发编程:Timer和TimerTask(转载)
Java并发编程:Timer和TimerTask(转载) 下面内容转载自: http://blog.csdn.net/xieyuooo/article/details/8607220 其实就Timer ...
- Oracle中的数据分页
--数据分页脚本 --创建包含数据分页代码元素声明的包头结构create or replace package data_controlis type type_cursor_data is ref ...
- pm2 配置
---恢复内容开始--- 1. ecosystem.json { "apps": [ { "name": "name", // 项目名 &q ...
- Guava学习笔记:Guava新增集合类型-Multiset
Guava引进了JDK里没有的,但是非常有用的一些新的集合类型.所有这些新集合类型都能和JDK里的集合平滑集成.Guava集合非常精准地实现了JDK定义的接口.Guava中定义的新集合有: Multi ...
- java 编译时的初始化顺序
有的时候,java的初始化会对我的工作照成很大影响,所以简单介绍一下, 首先介绍简单的变量的初始化:在类的内部,变量定义的先后顺序决定了初始化的顺序,即使变量定义散布于方法定义之间,它也会先于构造器和 ...
- Twproject Gantt – 开源的 JavaScript 甘特图组件
Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CSS 皮肤等功能.更重要的是,它是免费开源的. ...
- L20n – Mozilla 推出的 Web 本地化框架
L20n是 Mozilla 开发的用于 Web 开发的本地化框架.它允许本地化开发者把逻辑细分为本地化的资源. L20n 的框架不再需要开发人员深入理解自然语言的具体细节,并提供了机会为本地化创造更好 ...
- Dynatable – 基于 HTML5 & jQuery 的交互表格插件
Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现.Dynatable 的目的是提供一种简单的.可扩展的 API,能够轻松的浏览和操作大规模的 ...
- Java2_J2EE体系架构
J2EE是Java2平台企业版(Java 2 Platform,Enterprise Edition),它的核心是一组技术规范与指南,提供基于组件的方式来设计.开发.组装和部署企业应用.J2EE使用多 ...