Android UI进阶之旅6--Material Design

作者: 小楠总 | 来源:发表于2017-05-17 13:32 被阅读0次

Toolbar的基本使用

当作简单的控件使用即可。

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    app:logo="@drawable/ic_launcher"
    app:subtitle="子标题"
    app:navigationIcon="@drawable/abc_ic_ab_back_mtrl_am_alpha"
    app:subtitleTextColor="#fff"
    app:title="我是标题"
    app:titleTextColor="#fff"></android.support.v7.widget.Toolbar>

Toolbar是一个ViewGroup，里面可以放子控件。因此，如果你想标题居中的话，那么就放入一个TextView吧。

这里的?attr/colorPrimary是使用了系统的颜色值，当然我们也可以在主题中重写。

注意：Toolbar需要使用Appcompat的一套东西。

返回监听：

toolbar.setNavigationOnClickListener(new OnClickListener() {
    
    @Override
    public void onClick(View v) {
        finish();
    }
});

自定义Toolbar

Toolbar好用但是样式比较死板，一般来说我们会自定义一个Toolbar或者完全自己写一个，可以参考我的其他文章：Toolbar的使用

SearchView

SearchView也是V7包的控件，一般也是跟Toolbar中的菜单结合使用。

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.ricky.materialdesign.toolbar.MainActivity"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_search"
        android:orderInCategory="100"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always"
        android:title="查找"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never"
        android:title="设置"/>
    <item
        android:id="@+id/action_share"
        android:orderInCategory="100"
        app:showAsAction="always"
        android:title="分享"
        android:icon="@android:drawable/ic_menu_share"/>
    <item
        android:id="@+id/action_edit"
        android:orderInCategory="100"
        app:showAsAction="ifRoom"
        android:title="编辑"
        android:icon="@android:drawable/ic_menu_edit"/>

</menu>

这里app:actionViewClass="android.support.v7.widget.SearchView"是指定了菜单的View是一个SearchView。因此我们就可以在代码中使用了：

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

    //SearchView在Menu里面，我们通过Item的getActionView就可以找到
    MenuItem item = menu.findItem(R.id.action_search);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);
    //设置一出来就直接呈现搜索框---SearchView
    searchView.setIconified(false);

    //进来就呈现搜索框并且不能被隐藏
    //searchView.setIconifiedByDefault(false);

    //有时候我们需要实现自定义扩展效果
    //通过猜想，searchView用到了一个布局，去appcompat里面找到abc_search_view.xml,该里面的控件的属性
    ImageView icon = (ImageView) searchView.findViewById(R.id.search_go_btn);
    icon.setImageResource(R.drawable.abc_ic_voice_search_api_mtrl_alpha);
    icon.setVisibility(View.VISIBLE);
    searchView.setMaxWidth(200);
    
    //输入提示
    SearchView.SearchAutoComplete et = (SearchView.SearchAutoComplete) searchView.findViewById(R.id.search_src_text);
    et.setHint("输入商品名或首字母");
    et.setHintTextColor(Color.WHITE);
    
    //设置提交按钮是否可用(可见)
    searchView.setSubmitButtonEnabled(true);
    
    //提交按钮监听
    icon.setOnClickListener(new OnClickListener() {
        
        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "提交", 1).show();
        }
    });
    
    //像AutoCompleteTextView一样使用提示
    //searchView.setSuggestionsAdapter(adapter);

    //监听焦点改变
    searchView.setOnQueryTextFocusChangeListener(new OnFocusChangeListener() {
        
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            // TODO Auto-generated method stub
            
        }
    });

    //searchView的关闭监听
    searchView.setOnCloseListener(new OnCloseListener() {
        
        @Override
        public boolean onClose() {
            // TODO Auto-generated method stub
            return false;
        }
    });

    searchView.setOnSearchClickListener(new OnClickListener() {
        
        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "提交", 0).show();
        }
    });

    //监听文本变化，调用查询
    searchView.setOnQueryTextListener(new OnQueryTextListener() {
        
        @Override
        public boolean onQueryTextSubmit(String text) {
            //提交文本
            Toast.makeText(MainActivity.this, "提交文本:"+text, 0).show();
            return false;
        }
        
        @Override
        public boolean onQueryTextChange(String text) {
            // 文本改变的时候回调
            System.out.println("文本变化~~~~~"+text);
            
            return false;
        }
    });
    
    return true;
}

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

在这里，笔者还是觉得自己封装一个，一来适合自己的项目，二来扩展性比较强，因此就不详细介绍SearchView了。

实现Toolbar随着界面滑动透明度变化效果

首先我们需要一个布局，通过相对布局把Toolbar压在ScrollView（或者ListView、RecyclerView）的上面。Toolbar的高度与ScrollView上方内边距都使用系统的actionBarSize。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.nan.advancedui.toolbar.MyScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:clipToPadding="false"
        android:paddingTop="?attr/actionBarSize">

        <!--这里是我们的内容布局-->

    </com.nan.advancedui.toolbar.MyScrollView>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:title="标题"
        >
    </android.support.v7.widget.Toolbar>

</RelativeLayout>

还需要注意给ScrollView设置多两个属性，不然的话滑出去以后上内边距会一直保留：

android:clipToPadding="false" 该控件的绘制范围是否不在Padding里面。false：绘制的时候范围会考虑padding即会往里面缩进。
android:clipChildren="false" 子控件是否能不超出padding的区域（比如ScrollView上滑动的时候，child可以滑出该区域）

然后监听滑动事件，这里如果是ScrollView的话，需要自定义重写方法才能监听：

public class MyScrollView extends ScrollView {

    private OnAlphaListener listener;


    public void setOnAlphaListener(OnAlphaListener listener) {
        this.listener = listener;
    }

    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (listener != null) {
            int scrollY = getScrollY();
            int screen_height = getContext().getResources().getDisplayMetrics().heightPixels;
            if (scrollY <= screen_height / 3f) {//0~1f,而透明度应该是1~0f
                listener.onAlpha(1 - scrollY / (screen_height / 3f));//alpha=滑出去的高度/(screen_height/3f)
            }
        }
    }
}

透明度的计算需要根据实际情况来

自定义一个接口回调，Activity（Fragment）实：

public interface OnAlphaListener {

    void onAlpha(float alpha);

}

界面的逻辑如下：

public class ToolbarActivity extends AppCompatActivity implements OnAlphaListener {

    private Toolbar mToolbar;
    private MyScrollView mScrollview;

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

        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mScrollview = (MyScrollView) findViewById(R.id.scrollView);

        mScrollview.setOnAlphaListener(this);
    }

    @Override
    public void onAlpha(float alpha) {
        mToolbar.setAlpha(alpha);
    }
}

如果觉得我的文字对你有所帮助的话，欢迎关注我的公众号：

公众号：Android开发进阶

我的群欢迎大家进来探讨各种技术与非技术的话题，有兴趣的朋友们加我私人微信huannan88，我拉你进群交（♂）流（♀）。

网友评论

本文标题：Android UI进阶之旅6--Material Design

本文链接：https://www.haomeiwen.com/subject/cqqrxxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！