精华内容
下载资源
问答
  • AE超级实用工具栏脚本Ft-Toolbar简单使用介绍 ft-toolbar汉化插件 安装视频教程 内置调色师工具包安装说明:请将Presets下的两个文件夹拷贝到 Adobe After Effects CS5\Support Files\Presets下 方可使用
  • IE Dev Toolbar 中文

    2009-05-06 19:47:20
    微软发布了Internet Explorer Developer Toolbar最新版.该产品让开发人员能够深入探索和理解Web页面,帮助开发者更好地创建Web应用.安装后可以在IE中快速分析网页的软件.该工具条可集成在IE窗口,或以浮动窗口形式存在...
  • title.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ... android:id="@+id/top_bg" android:layout_width="match_parent

    title.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/top_bg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="vertical">
    
        <View
            android:id="@+id/viewTop"
            android:layout_width="match_parent"
            android:layout_height="25dp" />
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="45dp">
    
            <ImageView
                android:id="@+id/toolbar_iv_back"
                android:layout_width="45dp"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:padding="14dp"
                android:src="@drawable/img_back" />
    
            <TextView
                android:id="@+id/toolbar_tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_marginLeft="45dp"
                android:layout_marginRight="60dp"
                android:ellipsize="end"
                android:gravity="center"
                android:lines="1"
                android:text="我是标题"
                android:textSize="17sp"
                />
    
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true">
    
                <TextView
                    android:id="@+id/toolbar_tv_menu"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:lines="1"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:textSize="14sp"
                    />
    
                <ImageView
                    android:id="@+id/toolbar_iv_menu"
                    android:layout_width="45dp"
                    android:layout_height="match_parent"
                    android:padding="14dp"
                    android:visibility="gone" />
    
            </LinearLayout>
    
        </RelativeLayout>
    
        <View
            android:id="@+id/view_line"
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="@color/background"
            />
    
    </LinearLayout>

     

     

    activity_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">
    
        <com.cy.myapplication.MyScrollView
            android:id="@+id/scroller"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
    
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="2000dp"
                    android:background="@color/colorAccent" />
            </LinearLayout>
        </com.cy.myapplication.MyScrollView>
    
        <include
            layout="@layout/title" />
    
    </RelativeLayout>

     

     

    MyScrollView  自定义滚动View
    package com.cy.myapplication;
    
    import android.content.Context;
    import android.os.Build;
    import android.os.Handler;
    import android.util.AttributeSet;
    import android.view.MotionEvent;
    import android.widget.ScrollView;
    
    import androidx.annotation.RequiresApi;
    
    /**
     * Created by ShinnyYang on 2020/8/18.
     */
    public class MyScrollView extends ScrollView {
        private OnScrollListener onScrollListener;
        /**
         * 主要是用在用户手指离开MyScrollView,MyScrollView还在继续滑动,我们用来保存Y的距离,然后做比较
         */
        private int lastScrollY;
    
    
        public MyScrollView(Context context) {
            super(context);
        }
    
        public MyScrollView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
            super(context, attrs, defStyleAttr, defStyleRes);
        }
    
        /**
         * 设置滚动接口
         * @param onScrollListener
         */
        public void setScrolListener(OnScrollListener onScrollListener){
            this.onScrollListener = onScrollListener;
        }
    
        /**
         * 用于用户手指离开MyScrollView的时候获取MyScrollView滚动的Y距离,然后回调给onScroll方法中
         */
        private Handler handler = new Handler() {
            public void handleMessage(android.os.Message msg) {
                int scrollY = MyScrollView.this.getScrollY();
                if(onScrollListener != null){
                    onScrollListener.onScroll(scrollY);
                }
                //此时的距离和记录下的距离不相等,在隔5毫秒给handler发送消息
                if(lastScrollY != scrollY){
                    lastScrollY = scrollY;
                    handler.sendMessageDelayed(handler.obtainMessage(), 5);
                }
    
            }
        };
    
        /**
         * 重写onTouchEvent, 当用户的手在MyScrollView上面的时候,
         * 直接将MyScrollView滑动的Y方向距离回调给onScroll方法中,当用户抬起手的时候,
         * MyScrollView可能还在滑动,所以当用户抬起手我们隔20毫秒给handler发送消息,在handler处理
         * MyScrollView滑动的距离
         */
        @Override
        public boolean onTouchEvent(MotionEvent ev) {
            if(onScrollListener != null){
                onScrollListener.onScroll(lastScrollY = this.getScrollY());
            }
            if(ev.getAction() == MotionEvent.ACTION_UP){
                handler.sendMessageDelayed(handler.obtainMessage(), 20);
            }
            return super.onTouchEvent(ev);
        }
    
        public interface OnScrollListener{
            /**
             * 回调方法, 返回MyScrollView滑动的Y方向距离
             * @param scrollY
             *              、
             */
            public void onScroll(int scrollY);
        }
    
    }
    

     

    Main里面实现

     

    private LinearLayout top_bg;
    private MyScrollView scroller;

     

    private void initView() {
        top_bg = (LinearLayout) findViewById(R.id.top_bg);
        scroller = (MyScrollView) findViewById(R.id.scroller);
    
        top_bg.getBackground().setAlpha(0);
        scroller.setScrolListener(this);
    }
    

     

    @Override
    public void onScroll(int scrollY) {
        if (scrollY < 100) {
            top_bg.getBackground().setAlpha(0);
        } else if (scrollY >= 100 && scrollY < 860) {
            top_bg.getBackground().setAlpha((scrollY - 100) / 3);
        } else {
            top_bg.getBackground().setAlpha(255);
        }
    }

     

     

     

    <color name="white">#ffffff</color>
    <color name="black">#000000</color>
    <color name="background">#f6f6f6</color>
    展开全文
  • ft-Toolbar(AE自定义工具栏脚本) 操作步骤: 首先,将.jsx文件放置于AE目录下Scripts的ScriptUI Panels文件夹内,AE界面中窗口下调用; 然后,主界面中点击导入,最后,将.xml配置文件导入后应该就会出现和我一样的...
  • 上篇文章实现了Tab选项卡,那么本篇文章就封装下Toolbar,至于Toolbar是什么,能做什么大家可以去看看D_clock爱吃葱花的文章Android开发:最详细的 Toolbar 开发实践总结;部分设置我也是从文章里学到了,那么我们先...

    上篇文章实现了Tab选项卡,那么本篇文章就封装下Toolbar,至于Toolbar是什么,能做什么大家可以去看看D_clock爱吃葱花的文章Android开发:最详细的 Toolbar 开发实践总结;部分设置我也是从文章里学到了,那么我们先来看代码:

    开发语言:Kotlin

    Toolbar封装

    ToolbarManager接口

    package com.vslimit.kotlindemo.ui

    import android.support.v7.graphics.drawable.DrawerArrowDrawable

    import android.support.v7.widget.Toolbar

    import com.vslimit.kotlindemo.R

    import com.vslimit.kotlindemo.activity.MainActivity

    import com.vslimit.kotlindemo.extensions.ctx

    import org.jetbrains.anko.appcompat.v7.onMenuItemClick

    import org.jetbrains.anko.*

    interface ToolbarManager {

    val toolbar: Toolbar

    var toolbarTitle: String

    get() = toolbar.title.toString()

    set(value) {

    toolbar.title = value

    }

    fun enableHomeAsUp(up: () -> Unit) {

    toolbar.navigationIcon = createUpDrawable()

    toolbar.setNavigationOnClickListener { up() }

    }

    fun enableMenu(id: Int = R.menu.menu_home, up: () -> Unit) {

    toolbar.inflateMenu(id)

    toolbar.onMenuItemClick {

    when (it!!.itemId) {

    R.id.index -> toolbar.ctx.startActivity()

    else -> up()

    }

    true

    }

    }

    fun hiddenMenu(redId: Int) {

    toolbar.menu.findItem(redId).isVisible = false

    }

    private fun createUpDrawable() = DrawerArrowDrawable(toolbar.ctx).apply { progress = 1f }

    }

    kotlin中的接口与java 8 中的接口类似,接口允许方法有实现,和抽象类的区别是,接口中的属性不允许直接初始化,默认是abstract的。因此,在ToolbarManager中定义了几个方法,当Activity或Fragment继承接口时,可按照需要来实现或扩展。

    toolbar.xml

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_height="wrap_content"

    android:layout_width="match_parent" xmlns:toolbar="http://schemas.android.com/apk/res-auto">

    android:id="@+id/toolbar"

    android:layout_width="match_parent"

    toolbar:title="Kotlin Demo"

    toolbar:titleTextColor="@android:color/white"

    android:layout_height="?attr/actionBarSize">

    ToolbarManager使用

    Activity或Fragment都可以按照需要来继承ToolbarManager,本文中使用Activity来继承,首先在BaseActivity添加如下代码:

    BaseActivity

    package com.vslimit.kotlindemo.activity

    import android.os.Bundle

    import android.support.v4.app.Fragment

    import android.support.v4.app.FragmentManager

    import android.support.v4.app.FragmentTransaction

    import android.support.v7.app.AppCompatActivity

    import android.support.v7.widget.Toolbar

    import com.vslimit.kotlindemo.R

    import com.vslimit.kotlindemo.ui.ToolbarManager

    import org.jetbrains.anko.AnkoLogger

    import org.jetbrains.anko.find

    /**

    * Created by vslimit on 16/1/12.

    */

    abstract class BaseActivity : AppCompatActivity(), ToolbarManager, AnkoLogger {

    abstract val layoutResourceId: Int

    override val toolbar by lazy { find(R.id.toolbar) }

    override fun onCreate(savedInstanceState: Bundle?) {

    super.onCreate(savedInstanceState)

    setContentView(layoutResourceId)

    }

    override fun onResume() {

    super.onResume()

    }

    override fun onPause() {

    super.onPause()

    }

    override fun onDestroy() {

    super.onDestroy()

    }

    override fun onStop() {

    super.onStop()

    }

    fun switchContent(from: Fragment, to: Fragment) {

    val fm: FragmentManager = supportFragmentManager

    //添加渐隐渐现的动画

    val ft: FragmentTransaction = fm.beginTransaction()

    if (!to.isAdded) {

    // 先判断是否被add过

    ft.hide(from).add(R.id.frameLayout, to) // 隐藏当前的fragment,add下一个到Activity中

    } else {

    ft.hide(from).show(to) // 隐藏当前的fragment,显示下一个

    }

    ft.commit()

    }

    fun initFragment(to: Fragment) {

    val fm: FragmentManager = supportFragmentManager

    //添加渐隐渐现的动画

    // val ft: FragmentTransaction = fm.beginTransaction()

    fm.beginTransaction().add(R.id.frameLayout, to).commit()

    }

    open fun initTitle(title: String = "Kotlin Demo") {

    toolbarTitle = title

    }

    open fun initBack() {

    enableHomeAsUp { onBackPressed() }

    }

    open fun initHome() {

    enableMenu {}

    }

    }

    在具体的Activity中,比如MainActivity的布局中引入toolbar.xml

    activity_main.xml

    MainActivity

    将title设置为首页

    initTitle("首页")

    DemoActivity

    设置标题与后退键

    package com.vslimit.kotlindemo.activity

    import android.os.Bundle

    import com.vslimit.kotlindemo.R

    import com.vslimit.kotlindemo.model.FragmentEnum

    class DemoActivity(override val layoutResourceId: Int = R.layout.activity_demo) : BaseActivity() {

    companion object {

    val NAME = "DemoActivity:name"

    }

    override fun onCreate(savedInstanceState: Bundle?) {

    super.onCreate(savedInstanceState)

    if (savedInstanceState == null) {

    val name = intent.getStringExtra(NAME)

    initFragment(FragmentEnum.valueOf(name).fragment)

    }

    initTitle("DemoActivity")

    initBack()

    }

    }

    效果图如下:

    c603bb6d2226535986a790a56261b374.png

    S61217-123321.jpg

    至此Toolbar封装完成,如果有定制需求,可以在ToolbarManager中实现,当然了,Fragment也可以继承ToolbarManager,具体的大家可以自己扩展下。

    展开全文
  • 详解Toolbar的使用 以及自定义一个Toolbar样式

    详解Toolbar的使用以及自定义一个Toolbar样式

    • 前言:toolbar 是 android 5.0 引入的一个新控件,可以理解为是ActionBar的升级版,大大扩展了Actionbar,使用更灵活,不像actionbar那么固定,Toolbar更像是一般的View元素,可以被放置在view树体系的任意位置,可以应用动画,可以跟着scrollView滚动,可以与布局中的其他view交互。

    (一)详解Toolbar的使用

    • 首先我们来看一下原生的Toolbar是什么样的!
      这里写图片描述

    xml style属性:
    colorPrimaryDark:状态栏的颜色(可用来实现沉浸效果)
    colorPrimary: Toolbar的背景颜色 (xml中用android:background=”?attr/colorPrimary”指定)
    android:textColorPrimary:Toolbar中文字的颜色,设置后Menu Item的字体颜色也会跟随
    colorAccent:EditText正在输入时,RadioButton选中时的颜色

    xml 属性:
    app:title=”App Title”:Toolbar中的App Title
    app:subtitle=”Sub Title” :Toobar中的小标题
    app:navigationIcon=”@android:drawable/ic_menu_sort_by_size” : 导航图标(注意和Logo的区别)

    • 原生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:title="title"
    
            app:navigationIcon="@drawable/icon_back_32px"
    
            >
    
    
        </android.support.v7.widget.Toolbar>
    
    • 【如何使用Toolbar】关键在于:1.主题样式演示(Title);2.Navigation处理;3.Menu处理 。 下面是对这三个关键点的处理代码:
    
    public class MainActivity extends AppCompatActivity {
    
        //设置navigation监听器; 加载menu,设置menu监听器
    
        private  Toolbar mToolBar;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
    
    
            mToolBar = (Toolbar) this.findViewById(R.id.toolbar);
    
            mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
    
    
                    Toast.makeText(MainActivity.this,"Navigation Clicked",Toast.LENGTH_LONG).show();
    
                }
            });
    
    
            //加载Menu布局
            mToolBar.inflateMenu(R.menu.menu_main);
    
            mToolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
    
                    int id = item.getItemId();
                    if(id == R.id.action_settings){
      Toast.makeText(MainActivity.this,"action_settings Clicked",Toast.LENGTH_LONG).show();
    
                        return  true;
                    }
                    return false;
                }
            });
        }
    }

    (四)自定义Toolbar样式

    • 通过官网我们得知:Toolbar允许在Toolbar上添加组件,所以我们添加 EditText,TextView和Button来定义Toolbar样式。
    • 1.在values的attrs.xml中添加自定义属性
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <declare-styleable name="CnToolbar">
    
            <attr name="rightButtonIcon" format="reference"/>
            <attr name="isShowSearchView" format="boolean"/>
            <attr name="rightButtonText" format="string"/>
    
    
        </declare-styleable>
    </resources>
    • 在layout布局文件中定义toolbar.xml。此布局文件是要加载到toolbar里面的组件的布局文件。
    <?xml version="1.0" encoding="utf-8"?>
    
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    
        <EditText
            android:id="@+id/toolbar_searchview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:drawableLeft="@mipmap/icon_search"
            style="@style/search_view"
            android:hint="请输入搜索内容"
    
            android:visibility="gone"
            />
    
        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:gravity="center"
            android:textColor="@color/white"
            android:textSize="20sp"
    
            android:visibility="gone"
            />
    
        <Button
            android:id="@+id/toolbar_rightButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:textColor="@color/white"
    
            android:visibility="gone"
            style="@android:style/Widget.Material.Toolbar.Button.Navigation"
            />
    
    </RelativeLayout>
    • 在代码中封装自定义Toolbar。这里提醒一下,若不是在activity类中,想要绑定layout布局文件必须使用动态加载:View view = LayoutInflater.from(getContext()).inflate(R.layout.toolbar,null); 封装的代码注释详细,读者看下面代码:
    public class CnToolbar extends Toolbar {
    
    
    
        private LayoutInflater mInflater;
    
        private View mView;
        private TextView mTextTitle;
        private EditText mSearchView;
        private Button mRightButton;
    
    
        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();
            //设置toolbar的边距
            setContentInsetsRelative(10,10);
    
            if(attrs != null) {
                final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
                        R.styleable.CnToolbar, defStyleAttr, 0);
    
                /**
                 * 自定义控件的模式:1.通过TintTypedArray类从attrs.xml中取得自定义属性值
                 * 2.如果属性值非空,将其赋值
                 */
                final Drawable rightIcon = a.getDrawable(R.styleable.CnToolbar_rightButtonIcon);
                //一定要在这里进行条件判断
                if (rightIcon != null) {
                    //setNavigationIcon(navIcon);
                    setRightButtonIcon(rightIcon);
                }
    
                //默认false
                boolean isShowSearchView = a.getBoolean(R.styleable.CnToolbar_isShowSearchView,false);
                //如果isShowSearchView为true,把Title隐藏
                if(isShowSearchView){
    
                    showSearchView();
                    hideTitleView();
    
                }
    
                CharSequence rightButtonText = a.getText(R.styleable.CnToolbar_rightButtonText);
                if(rightButtonText !=null){
                    setRightButtonText(rightButtonText);
                }
    
                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);
                mRightButton = (Button) mView.findViewById(R.id.toolbar_rightButton);
    
                //把Toolbar里面的控件组合起来
                LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
    
                addView(mView, lp);
            }
    
        }
    
        //对右边的Button进行Background设置
        @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
        public void  setRightButtonIcon(Drawable icon){
    
            if(mRightButton !=null){
    
                mRightButton.setBackground(icon);
                mRightButton.setVisibility(VISIBLE);
            }
    
        }
    
        public void  setRightButtonIcon(int icon){
    
            setRightButtonIcon(getResources().getDrawable(icon));
        }
    
        public  void setRightButtonOnClickListener(OnClickListener li){
    
            mRightButton.setOnClickListener(li);
        }
    
        public void setRightButtonText(CharSequence text){
            mRightButton.setText(text);
            mRightButton.setVisibility(VISIBLE);
        }
    
    
        public void setRightButtonText(int id){
            setRightButtonText(getResources().getString(id));
        }
    
    
        public Button getRightButton(){
    
            return this.mRightButton;
        }
    
        //设置标题
        @Override
        public void setTitle(int resId) {
    
            setTitle(getContext().getText(resId));
        }
    
        @Override
        public void setTitle(CharSequence title) {
    
            initView();
            if(mTextTitle !=null) {
                mTextTitle.setText(title);
                showTitleView();
            }
    
        }
    
        //提供外接方法,实现EditView和TextView的转换
        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);
    
        }

    (三)接下来我们封装好的Toolbar的使用

    • 第一种效果:
            这里写图片描述
      <cniao5.com.cniao5shop.widget.CnToolbar
            android:id="@id/toolbar"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
    
            app:isShowSearchView="true"
            />
    • 第二种效果

             这里写图片描述

     <cniao5.com.cniao5shop.widget.CnToolbar
            android:id="@id/toolbar"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:title="购物车"
            app:rightButtonText="编辑"
            android:layout_alignParentTop="true"
            />
    展开全文
  • Toolbar的简单介绍和如何简单自定义toolbar

    万次阅读 热门讨论 2015-11-29 20:43:10
    通过本篇可以了解到: 1.什么是ToolBar 2.ToolBar 的一些重要属性 3.如何自定义ToolBar

    通过本篇可以了解到:

    • 1.什么是ToolBar

    • 2.ToolBar 的一些重要属性

    • 3.如何自定义ToolBar

    首先我们来看看实现的效果:
    这里写图片描述
    这里写图片描述

    其实实现上面的toolbar也是很简单的哈,这里我们就来实现以下吧。

    什么是toolbar

    首先我们先来看看toolbar的一个解释:

    One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
    
    一个或多个自定义视图。该应用程序可以添加任意的孩子欣赏到工具栏。他们将出现在布局中的这个位置。如果一个子视图的Toolbar.LayoutParams表示CENTER_HORIZONTAL的重力值的视图将尝试所有其他元素都被测量后留在工具栏上的可用空间内中心。(用的是google翻译,哈哈,大致能懂啥意思就行,我的英文可不太好哦)
    • toolbar 是 android 5.0 引入的一个新控件,可以理解为是ActionBar的升级版,大大扩展了Actionbar,使用更灵活,不像actionbar那么固定,Toolbar更像是一般的View元素,可以被放置在view树体系的任意位置,可以应用动画,可以跟着scrollView滚动,可以与布局中的其他view交互
    使用方式:
    <android.support.v7.widget.Toolbar   
        android:id="@+id/toolbar"    
        android:layout_height="wrap_content"    
        android:minHeight="?attr/actionBarSize"   
        android:background="?attr/colorPrimary"  >
     </android.support.v7.widget.Toolbar>

    ToolBar 的一些重要属性

    这里写图片描述

    xml style属性:
    • colorPrimaryDark:状态栏的颜色(可用来实现沉浸效果)
    • colorPrimary: Toolbar的背景颜色 (xml中用android:background=”?attr/colorPrimary”指定)
    • android:textColorPrimary:Toolbar中文字的颜色,设置后Menu Item的字体颜色也会跟随
    • colorAccent:EditText正在输入时,RadioButton选中时的颜色
    xml 属性:
    • app:title=”App Title”:Toolbar中的App Title
    • app:subtitle=”Sub Title” :Toobar中的小标题
    • app:navigationIcon=”@android:drawable/ic_menu_sort_by_size” : 导航图标(注意和Logo的区别)

    自定义ToolBar

    接下来就看看这个自定义的toolbar吧,在这也不做多解释,里面解释的还可以吧。

    package com.example.ruolan.letgo.widget;
    
    import android.content.Context;
    import android.graphics.drawable.Drawable;
    import android.support.v7.internal.widget.TintTypedArray;
    import android.support.v7.widget.Toolbar;
    import android.util.AttributeSet;
    import android.view.Gravity;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.EditText;
    import android.widget.ImageButton;
    import android.widget.TextView;
    
    import com.example.ruolan.letgo.R;
    
    /**
     * Created by ruolan on 2015/11/29.
     */
    public class LetToolBar extends Toolbar {
    
        //添加布局必不可少的工具
        private LayoutInflater mInflater;
    
        //搜索框
        private EditText mEditSearchView;
        //标题
        private TextView mTextTitle;
        //右边按钮
        private ImageButton mRightButton;
        //左边按钮
        private ImageButton mLeftButton;
    
        private View mView;
    
        //以下是继承ToolBar必须创建的三个构造方法
        public LetToolBar(Context context) {
            this(context, null);
        }
    
        public LetToolBar(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public LetToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
    
            initView();
    
            //Set the content insets for this toolbar relative to layout direction.
            setContentInsetsRelative(10, 10);
    
            if (attrs != null) {
                //读写自定义的属性,如果不会自己写的时候,就看看官方文档是怎么写的哈
                /**
                 * 下面是摘自官方文档
                 * final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
                 R.styleable.Toolbar, defStyleAttr, 0);
    
                 mTitleTextAppearance = a.getResourceId(R.styleable.Toolbar_titleTextAppearance, 0);
                 mSubtitleTextAppearance = a.getResourceId(R.styleable.Toolbar_subtitleTextAppearance, 0);
                 mGravity = a.getInteger(R.styleable.Toolbar_android_gravity, mGravity);
                 mButtonGravity = Gravity.TOP;
                 mTitleMarginStart = mTitleMarginEnd = mTitleMarginTop = mTitleMarginBottom =
                 a.getDimensionPixelOffset(R.styleable.Toolbar_titleMargins, 0);
    
                 final int marginStart = a.getDimensionPixelOffset(R.styleable.Toolbar_titleMarginStart, -1);
                 if (marginStart >= 0) {
                 mTitleMarginStart = marginStart;
                 }
    
                 * 
                 */
                final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
                        R.styleable.LetToolBar, defStyleAttr, 0);
    
                final Drawable leftIcon = a.getDrawable(R.styleable.LetToolBar_leftButtonIcon);
                if (leftIcon != null) {
                    setLeftButtonIcon(leftIcon);
                }
    
                final Drawable rightIcon = a.getDrawable(R.styleable.LetToolBar_rightButtonIcon);
                if (rightIcon != null) {
                    setRightButtonIcon(rightIcon);
                }
    
    
                boolean isShowSearchView = a.getBoolean(R.styleable.LetToolBar_isShowSearchView, false);
    
                //如果要显示searchView的时候
                if (isShowSearchView) {
                    showSearchView();
                    hideTitleView();
                }
                //资源的回收
                a.recycle();
            }
    
        }
    
    
    
        private void initView() {
    
            if (mView == null) {
                //初始化
                mInflater = LayoutInflater.from(getContext());
                //添加布局文件
                mView = mInflater.inflate(R.layout.toolbar, null);
    
                //绑定控件
                mEditSearchView = (EditText) mView.findViewById(R.id.toolbar_searchview);
                mTextTitle = (TextView) mView.findViewById(R.id.toolbar_title);
                mLeftButton = (ImageButton) mView.findViewById(R.id.toolbar_leftbutton);
                mRightButton = (ImageButton) mView.findViewById(R.id.toolbar_rightbutton);
    
    
                //然后使用LayoutParams把控件添加到子view中
                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();
            if (mTextTitle != null) {
                mTextTitle.setText(title);
                showTitleView();
            }
        }
    
        //隐藏标题
        public void hideTitleView() {
            if (mTextTitle != null)
                mTextTitle.setVisibility(GONE);
        }
    
        //显示标题
        public void showTitleView() {
            if (mTextTitle != null)
                mTextTitle.setVisibility(VISIBLE);
        }
    
        //显示搜索框
        public void showSearchView() {
            if (mEditSearchView != null)
                mEditSearchView.setVisibility(VISIBLE);
        }
    
        //隐藏搜索框
        public void hideSearchView() {
            if (mEditSearchView != null) {
                mEditSearchView.setVisibility(GONE);
            }
        }
    
        //给右侧按钮设置图片,也可以在布局文件中直接引入
        // 如:app:leftButtonIcon="@drawable/icon_back_32px"
        public void setRightButtonIcon(Drawable icon) {
            if (mRightButton != null) {
                mRightButton.setImageDrawable(icon);
                mRightButton.setVisibility(VISIBLE);
            }
        }
    
        //给左侧按钮设置图片,也可以在布局文件中直接引入
        private void setLeftButtonIcon(Drawable icon) {
            if (mLeftButton != null){
                mLeftButton.setImageDrawable(icon);
                mLeftButton.setVisibility(VISIBLE);
            }
        }
    
        //设置右侧按钮监听事件
        public void setRightButtonOnClickLinster(OnClickListener linster) {
            mRightButton.setOnClickListener(linster);
        }
    
        //设置左侧按钮监听事件
        public void setLeftButtonOnClickLinster(OnClickListener linster) {
            mLeftButton.setOnClickListener(linster);
        }
    
    
    }
    

    你也可以在里面在添加你想要的方法,以实现更多的你想要的功能。
    上面的这个是自定义的控件,那么我们使用就很简单了哈,只需要在使用的布局文件添加以下代码就行了哈

    <com.example.ruolan.letgo.widget.LetToolBar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
           //以下的这两个添加图片的,也可以在代码中添加,所以嘛,很容易的
            app:leftButtonIcon="@drawable/icon_back_32px"
            app:rightButtonIcon="@drawable/icon_back_32px"
            app:title="@string/home"
            app:isShowSearchView="false">
        </com.example.ruolan.letgo.widget.LetToolBar>

    还有所用到的style:

    <style name="search_view">
            <item name="android:textSize">18sp</item>
            <item name="android:textColor">@color/white</item>
            <item name="android:textColorHint">@color/white</item>
            <item name="android:background">@drawable/selector_search_view</item>
            <item name="android:paddingTop">6dp</item>
            <item name="android:paddingBottom">6dp</item>
            <item name="android:paddingLeft">4dp</item>
            <item name="android:paddingRight">4dp</item>
            <item name="android:singleLine">true</item>
        </style>
    <?xml version="1.0" encoding="utf-8"?>
    
    <selector
        xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="false">
            <shape android:shape="rectangle">
                <corners android:radius="8dp"/>
                <solid android:color="#eb4f38"/>
            </shape>
        </item>
        <item android:state_pressed="true">
            <shape android:shape="rectangle">
                <corners android:radius="8dp"/>
                <solid android:color="#eb4f38"/>
            </shape>
        </item>
        <item>
            <shape android:shape="rectangle">
                <corners android:radius="8dp"/>
                <solid android:color="#D82917"/>
            </shape>
        </item>
    </selector>
    

    当然这个我们要创建自己的自定义的组件:
    attrs.xml:

    <resources>
        <declare-styleable name="LetToolBar">
            <attr name="leftButtonIcon" format="reference"/>
            <attr name="rightButtonIcon" format="reference"/>
            <attr name="isShowSearchView" format="boolean"/>
        </declare-styleable>
    </resources>

    想必在代码中的实现就更简单了吧。

                //绑定这个控件就行了哈
     mToolBar = (LetToolBar) findViewById(R.id.toolbar);
    
            //当然也可以调用里面的各种方法,来实现你想要的搜索框还是按钮和标题,当然也可以在布局文件中直接实现,是不是很简单呢
           // mToolBar.hideTitleView();
            //mToolBar.showSearchView();

    好了,今天就到这了哈,也是刚刚学习,还请多多关照!!!

    展开全文
  • 微软IE Developer Toolbar是微软专门为Web开发人员设计的一款免费产品,该产品让开发人员能够深入探索和理解Web页面,帮助开发者更好地创建Web应用.安装后可以在IE中快速分析网页的软件.该工具条可集成在IE窗口,或以...
  • 动态创建工具栏并启用Tooltip的步骤可参考: MFC对话框中的工具栏、状态栏设计小结然而,该方法的提示信息显示乱码,主要原因是程序启用unicode字符集,CString::GetBuffer函数返回LPTSTR,定义了Unicode宏的情况下...
  • toolbar

    2019-10-07 20:01:53
     //设置只显示中文  [date setLocale:[NSLocale localeWithLocaleIdentifier:@"zh-CN"]];  //只显示日期  date.datePickerMode=UIDatePickerModeDate;  //当光标移到文本框时召唤时间选择器  self....
  • 细说 AppbarLayout,如何理解可折叠 Toolbar 的定制

    万次阅读 多人点赞 2017-08-11 01:28:37
    这两个直译为中文就是进入和离开。这里的主语是 AppBarLayout 中的内容,宾语是 CoordinatorLayout。 当 AppBarLayout 中的内容要从 CoordinatorLayout 外面进入内部时,我们用 enter 指代这种行为,对应的...
  • 简单 首先,命名空间使用 xmlns:app="http://schemas.android.com/apk/res-auto" 这个。目的是使用自己的命名空间。 而android 自己的是这个 ...然后,在我们使用的 ToolBar 中添加属...
  • ToolBar

    2016-06-05 22:26:23
    我们都知道Marterial Design是Google推出的全新UI设计规范,如果对其不太了解的可以看下:Material design非官方中文指导手册 ,或者我的前面几篇Material Design的译文,相比之前Google在Android H
  • Android ToolBar 使用完全解析

    万次阅读 多人点赞 2016-05-07 11:12:27
    ToolBar简介ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar,由于其高度的可定制性、灵活性、具有Material Design风格等优点,越来越多的应用也用上了ToolBar,比如常用的知乎软件其顶部导航栏...
  • ToolBar的进阶详细使用

    千次阅读 2016-06-02 21:34:51
    原文出处: 【张鸿洋的博客】 ...随着Material Design的逐渐的普及,业内也有很多具有分享精神的伙伴翻译了material design specification ,中文翻译地址:Material Design 中文版。So,我们也开始Androi
  • Toolbar 开发

    2017-04-20 13:10:07
    Material Design 之 Toolbar 开发实践总结 转自:http://www.jianshu.com/p/e2ae6aaff696 在2014年Google IO 大会上,Google 推出了一套全新的设计规范Material Design,这也为广大的Android 开发者带来了福音...
  • Toolbar作为ActionBar的替代,在material design 中也对其有一个统一名称:app bar,在未来的 Android app 中,就以 toolbar 这个元件来实作之。下面就一步步的来探析一下它的使用方法。  (一)Toolbar的显示 ...
  • '搜索计算机', self) toolbar = self.addToolBar('') # 添加工具栏 toolbar.addAction(addAction) # toolbar.addAction(findAction) connect = QLabel("当前连接:") toolbar.addWidget(connect) self.resize(800,...
  • ToolBar的样式设置

    千次阅读 2016-09-26 16:16:18
    由于新的项目开始了,原来一直使用ActionBar,但是存在各种问题,后来了解google又推出了ToolBar这个替代品,可以很好的解决一些以前ActionBar的问题,本来以为是比较简单的控件,结果在使用的过程中间出现了不少的...
  • /api/Ext.toolbar.Toolbar API doc地址:  在线英文5.0地址 : http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext  中文4.1翻译在线地址: http://extjs-doc-cn.github.io/ext4api/  中文4.1下载到本地: ...
  • MD设计之Toolbar

    万次阅读 2016-04-23 17:11:09
    想全面了解该风格的可参考极客学院的中文版(译文) Material Design Material Design专用在线配色工具: Materialpalette MD的三种主题 如果你的项目最低支持5.0,那么可以这样设置Theme @android :...
  • Android7.0中文文档(API)-- Toolbar

    千次阅读 2017-06-15 11:26:49
    Android中文文档 Toolbar
  • Android--ToolBar基本介绍

    2017-09-25 13:26:02
    1、简介ToolBar 是 Android5.0 推出的导航控件,官方在某些程度上认为 ActionBar 限制了 android app 的开发与设计的弹性,所以 ToolBar 的出现可以说是用来代替 Action_Bar。的确对比 Action_Bar,ToolBar 的使用...
  • 简要教程Toolbar.js是一款非常实用的Tooltips样式的jQuery工具栏插件。类似的HTML5中国还分享过一款使用 纯javacript编写的轻量级tooltips工具提示插件html5 tooltipsjs ;Toolbar.js使用非常简单,可以和Font ...
  • BootstrapTable 实现toolbar删除操作

    千次阅读 2018-01-03 22:29:09
    说明:操作前必须导入jquery.js、bootstrap.js和boostrapTable.min.js 1、DIV数据: div class="content"> div class="table-responsive"> div id="toolbar"> "javascript:void(0);" class="btn btn-primar
  • Android ToolBar 使用

    千次阅读 2017-09-20 00:07:28
    ToolBar简介 ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar,由于其高度的可定制性、灵活性、具有Material Design风格等优点,越来越多的应用也用上了ToolBar,比如常用的知乎软件其顶部...
  • Android Toolbar总结

    2017-08-13 15:40:19
    ToolBar简介ToolBar是Android 5.0推出的一个新的导航控件用于取代之前的ActionBar,由于其高度的可定制性、灵活性、具有Material Design风格等优点,越来越多的应用也用上了ToolBar,比如常用的知乎软件其顶部导航栏...
  • Android 5.x Theme 与 ToolBar 实战

    万次阅读 多人点赞 2015-04-27 09:50:39
    随着Material Design的逐渐的普及,业内也有很多具有分享精神的伙伴翻译了material design specification ,中文翻译地址:Material Design 中文版。So,我们也开始Android 5.x相关的blog,那么首先了解的当然是其...
  • 详细示例进入:http://kendoui.io/examples/grid/toolbar-template.html KendoUI中文网:http://www.kendoui.io ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,672
精华内容 7,068
关键字:

toolbar中文