編輯:關於Android編程
滑動導航菜單一直都是移動App中比較流行的UI設計,隨著Material Design的盛行Android也越來越多采用這種設計,當然這種滑動菜單樣式也是各種各樣五花八門,這篇文章就來總結下如何利用Android Api去快速構建各種類型的滑動導航菜單效果。
1.先看第一種樣式,這也是QQ客戶端V6版本的滑動菜單樣式
快速實現這個UI效果需要利用V4包的SlidingPaneLayout控件,這是一個幫助開發者實現水平的多層滑動的Layout,繼承自ViewGroup。
下面看下具體的實現代碼
layout
代碼還是很簡單的,最外層是SlidingPaneLayout這個容器控件,裡面放了2個子布局,第一個用來放置導航菜單布局,第二個放置主視圖布局。
Java代碼
SlidingPaneLayout 一些主要方法
- setParallaxDistance(int parallaxBy) 設置滑動視差
- setCoveredFadeColor(int color) 導航菜單視圖的滑動顏色漸變
- setSliderFadeColor(int color) 主視圖的滑動顏色漸變
- setPanelSlideListener(SlidingPaneLayout.PanelSlideListener listener) 滑動監聽
- openPane() 打開導航菜單
- closePane() 關閉導航菜單
- https://developer.android.com/reference/android/support/v4/widget/SlidingPaneLayout.html
/** * Created by www.lijizhou.com on 2016/7/23. * SlidingPaneLayout Sample */ public class SlidingPaneLayoutActivity extends AppCompatActivity { private SlidingPaneLayout mSlidingPane; private LinearLayout ll_menu,ll_main; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_slidingpane); mSlidingPane= (SlidingPaneLayout) findViewById(R.id.SlidingPane); ll_menu=(LinearLayout)findViewById(R.id.ll_menu); ll_main=(LinearLayout)findViewById(R.id.ll_main); setSupportActionBar((Toolbar) findViewById(R.id.toolbar)); //設置滑動視差 可選 mSlidingPane.setParallaxDistance(200); //菜單滑動的顏色漸變設置 可選 //mSlidingPane.setCoveredFadeColor(getResources().getColor(R.color.colorAccent)); //主視圖滑動的顏色漸變設置 可選 mSlidingPane.setSliderFadeColor(0); //滑動監聽 可選 mSlidingPane.setPanelSlideListener(new SlidingPaneLayout.PanelSlideListener() { @Override public void onPanelSlide(View panel, float slideOffset) { Log.i("mylog","slide --- "+slideOffset); // slideOffset這個參數 是跟隨滑動0-1變化的 通過這個數值變化我們可以做出一些不一樣的滑動效果 // ll_menu.setScaleY(slideOffset / 2 + 0.5F); // ll_menu.setScaleX(slideOffset/ 2 + 0.5F); // ll_main.setScaleY(1 - slideOffset / 5); } @Override public void onPanelOpened(View panel) { Log.i("mylog","slide --- open"); } @Override public void onPanelClosed(View panel) { Log.i("mylog","slide --- close"); } }); } }
OK,這樣就實現了滑動導航的效果,注意在滑動監聽中的這個方法裡面,跟據slideOffset參數0~1的變化可以去改變視圖大小就會做出更多種類的效果,這裡我們設置滑動過程中改變主視圖的大小,代碼如下
public void onPanelSlide(View panel, float slideOffset) { Log.i("mylog","slide --- "+slideOffset); // slideOffset這個參數 是跟隨滑動0-1變化的 通過這個數值變化我們可以做出一些不一樣的滑動效果 ll_menu.setScaleY(slideOffset / 2 + 0.5F); ll_menu.setScaleX(slideOffset/ 2 + 0.5F); ll_main.setScaleY(1 - slideOffset / 5); }
運行效果
2.下面介紹第二種滑動導航菜單的效果,主視圖不動,然後在邊緣劃出菜單。
快速實現這個效果需要利用V4包的DrawerLayout 這個布局容器,可見V4包下面有多少好東西,另外其實SlidingPaneLayout和這個DrawerLayout都是用V4的ViewDragHelper去實現的,這是一個幫助類,這裡就不多做介紹了,對它感興趣的可以深入了解下。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPr+0z8K0+sLryrXP1jwvcD4NCjxibG9ja3F1b3RlPg0KCTxwPkxheW91dDwvcD4NCjwvYmxvY2txdW90ZT4NCjxwcmUgY2xhc3M9"brush:java;">
需要注意的是主視圖的布局代碼要放在側滑菜單布局的前面,側滑菜單布局的代碼中android:layout_gravity=”start” 從左側滑動,反之end右側滑動。
Java代碼
DrawerLayout 的一些主要方法
addDrawerListener(DrawerLayout.DrawerListener listener) 添加滑動監聽
openDrawer(int gravity) 開啟導航菜單 參數:GravityCompat.START GravityCompat.END 要跟XML設置相同
closeDrawer(int gravity) 關閉導航菜單
isDrawerOpen(int drawerGravity) 菜單是否開啟
https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html
/** * Created by www.lijizhou.com on 2016/7/23. * DrawerLayout Sample */ public class DrawerLayoutActivity extends AppCompatActivity { private DrawerLayout drawerLayout; private Toolbar toolbar; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_drawerlayout); setSupportActionBar(toolbar=(Toolbar) findViewById(R.id.toolbar)); drawerLayout=(DrawerLayout)findViewById(R.id.dl_left); //ActionBarDrawerToggle是DrawerLayout.DrawerListener的實現,可以方便的將drawlayout和actionbar結合起來 ActionBarDrawerToggle actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close){ @Override public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); } @Override public void onDrawerClosed(View drawerView) { super.onDrawerClosed(drawerView); } }; actionBarDrawerToggle.syncState(); drawerLayout.addDrawerListener(actionBarDrawerToggle); } }
DrawerLayout跟ActionBarDrawerToggle配合快速構建出具有動畫交互的滑動導航菜單效果就實現了,是不是很簡單。
由於篇幅有限先介紹這兩個滑動效果,下一篇(二)將介紹具有material design官方設計標准的滑動菜單設計,先看下運行圖,下篇見,也歡迎朋友在下方留言和點擊坐上角的關注,感謝。
源代碼下載地址:https://github.com/lijizhou/SlidingLayoutSample
承接第二十八話加載大圖片,本篇介紹如何創建一個圖片的副本。安卓中加載的原圖是無法對其修改的,因為默認權限是只讀的。但是通過創建副本,就可以對其做一些修改,繪制等了。首先創
因為案例比較簡單,所以簡單用AndroidApplication -> Game -> Stage 搭建框架 一、主入口,無特殊 復制代碼 代碼如下: pub
關於Layout_width/height引發的寬高思考方式一: 結果不符合預期。運行結果: 方式二:
如果是列表(單列多行形式)的使用ListView,如果是多行多列網狀形式的優先使用GridView。<?xml version=1.0 encoding=u