码迷,mamicode.com
首页 > 其他好文 > 详细

Drawer Arrow Drawable(meun-icon-to-back-arrow)使用,仿知乎菜单栏界面

时间:2015-05-01 14:49:28      阅读:301      评论:0      收藏:0      [点我收藏+]

标签:actionbar   android应用   github   动画   界面   

Drawer Arrow Drawable(meun-icon-to-back-arrow)使用,仿知乎菜单栏界面

一、什么是Drawer Arrow Drawable

Drawer Arrow Drawable 其实就是一个抽屉侧滑菜单栏,只不过加入了很酷炫的meun-icon-to-back-arrow动画效果,如下图所示

技术分享技术分享技术分享


二、Drawer Arrow Drawable的实现原理

设计方法:

我的想法是:如果我能生成每条线末端的移动曲线,我就能随抽屉(drawer)的滑动,根据参数t简单地计算出每条路径(path)上的点,
然后只需从curveA上的点M向curveB上的N绘制一条直线即可。

为了生成这些曲线,我需要一个适合取用的点的集合案例。我首先想到我应该在打开抽屉的时候,从我的设备上录制视频,分成N帧。但是我突然
想到:抽屉滑动时的插值器会使得这些帧不能均匀分布。不用太复杂,我只是粗略地移动抽屉,然后对每一步截屏。

技术分享 技术分享

这儿,我把所有的图像放在Adobe Illustrator上,并用一条向量追踪一条线(方便缩放:6pt等于6px),这是一个劳动密集型的过程,
充满了大量的错误;毕竟,六个像素加抗锯齿是一种低精度,相对于要使用到的数学方法


三、Drawer arrow Drawable的使用

package com.example.ldrawertest;

import com.example.ldrawerlibrary.ActionBarDrawerToggle;
import com.example.ldrawerlibrary.DrawerArrowDrawable;
import android.annotation.SuppressLint;
import android.app.ActionBar;
import android.app.Activity;
import android.content.Intent;
import android.content.res.Configuration;
import android.net.Uri;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;


public class MainActivity extends Activity {

    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle;
    private DrawerArrowDrawable drawerArrow;
    private boolean drawerArrowColor;

    @SuppressLint("NewApi")
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //得到一个actionbar
        ActionBar ab = getActionBar();
        // 给左上角图标的左边加上一个返回的图标
        ab.setDisplayHomeAsUpEnabled(true);
        //必须通过调用setHomeButtonEnabled(true)方法确保这个图标能够作为一个操作项
        ab.setHomeButtonEnabled(true);

        
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
       //抽屉侧栏的布局,为一个listView
        mDrawerList = (ListView) findViewById(R.id.navdrawer);

        //创建DrawerArrow
        drawerArrow = new DrawerArrowDrawable(this) {
            @Override
            public boolean isLayoutRtl() {
                return false;
            }
        };
        
        /*
         *  ActionBarDrawerToggle  是 DrawerLayout.DrawerListener实现。
			和 NavigationDrawer 搭配使用,推荐用这个方法,符合Android design规范。
			作用:
			1.改变android.R.id.home返回图标。
			2.Drawer拉出、隐藏,带有android.R.id.home动画效果。
			3.监听Drawer拉出、隐藏;
         */
        
        
        //动作条抽屉切换器将抽屉与app icon动作条绑定正确交互。
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
            drawerArrow, R.string.drawer_open,
            R.string.drawer_close) {
        	//当抽屉关闭时
            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                /*
                 * getActivity().invalidateOptionsMenu(); 
                 * 在运行时改变menu item的状态。你需要重写onPrepareOptionsMenu() ,
                 * 它方便你对item移除,添加,使不可用等。在android 3.0以上,
                 * 你必须调用invalidateOptionsMenu() 。
                 * 
                 */
                invalidateOptionsMenu();
            }
            //当抽屉打开时
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                invalidateOptionsMenu();
            }
        };
        
        //设置监听drawer切换
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        //该方法会自动和actionBar关联, 将开关的图片显示在了action上,如果不设置,也可以有抽屉的效果,不过是默认的图标  
        mDrawerToggle.syncState();

        //设置LDrawer填充内容,通过Adapter填充
        String[] values = new String[]{
            "     用户名",
            "     发现",
            "     关注",
            "     收藏",
            "     草稿",
            "     提问",
            "     设置"
        };
        
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
            android.R.layout.simple_list_item_1, android.R.id.text1, values);
        mDrawerList.setAdapter(adapter);
        
        
        //抽屉侧栏设置点击事件
        mDrawerList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {
                switch (position) {
                    case 0:
                        mDrawerToggle.setAnimateEnabled(false);//设置停止或开启动画
                        drawerArrow.setProgress(1f);//设置普通菜单图标模式
                        break;
                    case 1:
                        mDrawerToggle.setAnimateEnabled(false);
                        drawerArrow.setProgress(0f);//设置返回箭头模式
                        break;
                    case 2:
                        mDrawerToggle.setAnimateEnabled(true);
                        mDrawerToggle.syncState();
                        break;
                    case 3:
                        if (drawerArrowColor) {
                            drawerArrowColor = false;
//                            drawerArrow.setColor(R.color.ldrawer_color);//设置颜色
                        } else {
                            drawerArrowColor = true;
//                            drawerArrow.setColor(R.color.drawer_arrow_second_color);
                        }
                        mDrawerToggle.syncState();
                        break;
                    case 4:
                        Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://github.com/IkiMuhendis/LDrawer"));
                        startActivity(browserIntent);
                        break;
                    case 5:
                        Intent share = new Intent(Intent.ACTION_SEND);
                        share.setType("text/plain");
                        share.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                        share.putExtra(Intent.EXTRA_SUBJECT,
                            getString(R.string.app_name));
                        share.putExtra(Intent.EXTRA_TEXT, getString(R.string.app_description) + "\n" +
                            "GitHub Page :  https://github.com/IkiMuhendis/LDrawer\n" +
                            "Sample App : https://play.google.com/store/apps/details?id=" +
                            getPackageName());
                        startActivity(Intent.createChooser(share,
                            getString(R.string.app_name)));
                        break;
                    case 6:
                        String appUrl = "https://play.google.com/store/apps/details?id=" + getPackageName();
                        Intent rateIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(appUrl));
                        startActivity(rateIntent);
                        break;
                }

            }
        });
    }

    
    
    //菜单键点的事件处理
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            if (mDrawerLayout.isDrawerOpen(mDrawerList)) {
                mDrawerLayout.closeDrawer(mDrawerList);
            } else {
                mDrawerLayout.openDrawer(mDrawerList);
            }
        }
        return super.onOptionsItemSelected(item);
    }

    //activity创完成后
    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        mDrawerToggle.syncState();
    }

    //配置改变时
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }
}



Drawer Arrow Drawable(meun-icon-to-back-arrow)使用,仿知乎菜单栏界面

标签:actionbar   android应用   github   动画   界面   

原文地址:http://blog.csdn.net/itwuchen/article/details/45419219

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!