2. 程式人生 > >自定義slideview（轉）

自定義slideview（轉）

阿新 • • 發佈：2018-12-17

Android控制元件View打造完美的自定義側滑選單

這篇文章主要介紹了Android控制元件View打造完美的自定義側滑選單的相關資料，具有一定的參考價值，感興趣的小夥伴們可以參考一下

一、概述

　　在App中，經常會出現側滑選單，側滑滑出View等效果，雖然說Android有很多第三方開源庫，但是實際上咱們可以自己也寫一個自定義的側滑View控制元件，其實不難，主要涉及到以下幾個要點：

1.對Android中Window類中的DecorView有所瞭解

2.對Scroller類實現平滑移動效果

3.自定義ViewGroup的實現

首先來看看效果圖吧：

   

  

　　下面現在就來說說這裡咱們實現側滑View的基本思路吧，這裡我採用的是自定義一個繼承於RelativeLayout的控制元件叫做XCSlideView類吧。

首先從佈局檔案中inflater出來一個menuView，然後通過addView的方法，將該側滑View新增到自定義的控制元件View中怎麼讓XCSlideView 這個側滑View 隱藏到螢幕之外呢？很簡單通過ScrollTo方法，移動一個螢幕寬度的距離即可，這裡以左側滑出為例吧，只需要這樣 XCSlideView.this.scrollTo(mScreenWidth, 0);mScreenWidth是螢幕寬度。下面還要處理的就是底下的半透明黑色的蒙層效果，這個其實就是一個View，然後設定半透明效果。這個當然簡單了，關鍵是咱們讓他顯示在咱們的自定義側滑View的下面呢，這裡咱們先給出DecorView的簡單分析，方便下面介紹新增半透明View蒙層下：

下面是對上面這張圖的解釋：

1、DecorView為整個Window介面的最頂層View。

2、DecorView只有一個子元素為LinearLayout。代表整個Window介面，包含通知欄，標題欄，內容顯示欄三塊區域。

3、LinearLayout裡有兩個FrameLayout子元素。

  (20)為標題欄顯示介面。只有一個TextView顯示應用的名稱。也可以自定義標題欄，載入後的自定義標題欄View將加入FrameLayout中。

  (21)為內容欄顯示介面。就是setContentView()方法載入的佈局介面，加入其中。 

有了上面的DecorVIew知識背景，現在就來說說 怎麼新增蒙層View和將自定義側滑View新增到Activity的DecorView中，首先把蒙層View新增到

（31）customView中去，然後將自定義側滑View新增到 （21）FrameLayout中去，至於為什麼要這樣，是因為考慮到自定義側滑View不一定是寬度為螢幕寬度，所以才這麼做，而且也方面處理有無標題欄，有無採用沉浸式狀態列設計等情況。

二、自定義側滑View的實現

根據上面的概述，大家應該知道大概的思路了，下面我就給出自定義側滑View類的核心程式碼：

1、自定義側滑View用到的變數:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

//側滑方向-從哪側滑出

public static enum Positon {

LEFT, RIGHT

}

private Context mContext;

private Activity mActivity;

private Scroller mScroller = null;

//側滑選單佈局View

private View mMenuView;

//底部蒙層View

private View mMaskView;

private int mMenuWidth = 0;

//螢幕寬度

private int mScreenWidth = 0;

//是否在滑動中

private boolean mIsMoving = false;

//顯示登入介面與否

private boolean mShow = false;

//滑動動畫時間

private int mDuration = 600;

//預設側滑方向為左

private Positon mPositon = Positon.LEFT;

2、初始化建立自定義側滑View：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

**

* 建立側滑選單View

*/

public static XCSlideView create(Activity activity) {

XCSlideView view = new XCSlideView(activity);

return view;

}

/**

* 建立側滑選單View

*/

public static XCSlideView create(Activity activity, Positon positon) {

XCSlideView view = new XCSlideView(activity);

view.mPositon = positon;

return view;

}

3、建立半透明蒙層View，並新增到contentView中去

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

/**

* 建立 蒙層View並新增到contentView中

*/

private void attachToContentView(Activity activity, Positon positon) {

mPositon = positon;

ViewGroup contentFrameLayout = (ViewGroup) activity.findViewById(android.R.id.content);

ViewGroup contentView = ((ViewGroup) contentFrameLayout.getChildAt(0));

mMaskView = new View(activity);

mMaskView.setBackgroundColor(mContext.getResources().getColor(R.color.mask_color));

contentView.addView(mMaskView, contentView.getLayoutParams());

mMaskView.setVisibility(View.GONE);

mMaskView.setClickable(true);

mMaskView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View view) {

if (isShow()) {

dismiss();

}

}

});

}

4、設定側滑選單View，並新增到DectorView->LinearLayout->內容顯示區域View（FrameLayout）中

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

/**

* 設定側滑選單View，並新增到DectorView->LinearLayout->內容顯示區域View中

*/

public void setMenuView(Activity activity, View view) {

mActivity = activity;

mMenuView = view;

LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

addView(mMenuView, params);

mMenuView.post(new Runnable() {

@Override

public void run() {

// TODO Auto-generated method stub

mMenuWidth = mMenuView.getWidth();

switch (mPositon) {

case LEFT:

XCSlideView.this.scrollTo(mScreenWidth, 0);

break;

case RIGHT:

XCSlideView.this.scrollTo(-mScreenWidth, 0);

break;

}

}

});

ViewGroup contentFrameLayout = (ViewGroup) activity.findViewById(android.R.id.content);

ViewGroup contentView = contentFrameLayout;

contentView.addView(this);

FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) this.getLayoutParams();

switch (mPositon) {

case LEFT:

layoutParams.gravity = Gravity.LEFT;

layoutParams.leftMargin = 0;

break;

case RIGHT:

layoutParams.gravity = Gravity.RIGHT;

layoutParams.rightMargin = 0;

break;

}

TextView titleFrameLayout = (TextView) activity.findViewById(android.R.id.title);

if( titleFrameLayout != null){

layoutParams.topMargin = DensityUtil.getStatusBarHeight(mContext);

}

int flags = mActivity.getWindow().getAttributes().flags;

int flag = (flags & WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

if(flag == WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS){

//說明狀態列使用沉浸式

layoutParams.topMargin = DensityUtil.getStatusBarHeight(mContext);

}

this.setLayoutParams(layoutParams);

}

5、處理自定義側滑View的側滑滑動和隱藏效果：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

/**

* 顯示側滑選單View

*/

public void show(){

if(isShow() && !mIsMoving)

return;

switch (mPositon) {

case LEFT:

startScroll(mMenuWidth, -mMenuWidth, mDuration);

break;

case RIGHT:

startScroll(-mMenuWidth, mMenuWidth, mDuration);

break;

}

switchMaskView(true);

mShow = true;

}

/**

* 蒙層顯示開關

*/

private void switchMaskView(boolean bShow){

if(bShow){

mMaskView.setVisibility(View.VISIBLE);

Animation animation = new AlphaAnimation(0.0f, 1.0f);

animation.setDuration(mDuration);

mMaskView.startAnimation(animation);

}else{

mMaskView.setVisibility(View.GONE);

}

}

/**

* 關閉側滑選單View

*/

public void dismiss() {

// TODO Auto-generated method stub

if(!isShow() && !mIsMoving)

return;

switch (mPositon) {

case LEFT:

startScroll(XCSlideView.this.getScrollX(), mMenuWidth, mDuration);

break;

case RIGHT:

startScroll(XCSlideView.this.getScrollX(), -mMenuWidth, mDuration);

break;

}

switchMaskView(false);

mShow = false;

}

public boolean isShow(){

return mShow;

}

@Override

public void computeScroll() {

// TODO Auto-generated method stub

if (mScroller.computeScrollOffset()) {

scrollTo(mScroller.getCurrX(), mScroller.getCurrY());

// 更新介面

postInvalidate();

mIsMoving = true;

} else {

mIsMoving = false;

}

super.computeScroll();

}

/**

* 拖動移動

*/

public void startScroll(int startX, int dx,int duration){

mIsMoving = true;

mScroller.startScroll(startX,0,dx,0,duration);

invalidate();

}

三、如何使用該自定義側滑View控制元件

使用起來，比較簡單，通過create方法建立一個側滑VIew，然後通過setMenuView方法設定一個側滑View進去，有需要設定寬度的話， 通過setMenuWidth方法來設定即可，最後用show（）方法滑出來就可以啦，使用起來是不是很方便？

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

private XCSlideView mSlideViewLeft;

//螢幕寬度

private int mScreenWidth = 0;

View menuViewLeft = LayoutInflater.from(mContext).inflate(R.layout.layout_slideview,null);

mSlideViewLeft = XCSlideView.create(this, XCSlideView.Positon.LEFT);

mSlideViewLeft.setMenuView(MainActivity.this, menuViewLeft);

mSlideViewLeft.setMenuWidth(mScreenWidth * 7 / 9);

Button left = (Button)findViewById(R.id.btn_left);

left.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

if (!mSlideViewLeft.isShow())

mSlideViewLeft.show();

}

});

相關推薦

自定義slideview（轉）

Android控制元件View打造完美的自定義側滑選單 這篇文章主要介紹了Android控制元件View打造完美的自定義側滑選單的相關資料，具有一定的參考價值，感興趣的小夥伴們可以參考一下 一、概述 　　在App中，經常會出現側滑選單，側滑滑出View等

【Qt】Qt之自定義介面（QMessageBox）【轉】

簡述 通過前幾節的自定義窗體的學習，我們可以很容易的寫出一套屬於自己風格的介面框架，通用於各種窗體，比如：QWidget、QDialog、QMainWindow。 大多數窗體的實現都是採用控制元件堆積來完成的，只要思路清晰，再複雜的介面實現起來都遊刃有餘。下面我來列舉一個由QMessageBox擴充套

自定義屬性（2）

aps 按鈕 charset script 定義 type i++ element color 定義三個按鈕 點擊按鈕，出現A、B、C、D字母，點擊一下，出現一個 當按鈕字母為 D 的時候，繼續點擊又會重新回到 A 1 <!DOCTYPE HTML>

自定義廣播（BroadcastReceiver）事件 --Android開發

ppc andro xtend 類型 class get receive cli time 本例演示自定義廣播事件。我們需要做的是，在主活動中寫發送廣播的代碼，然後在接收廣播的類中寫接收廣播的代碼。 1、主活動中點擊按鈕後發送廣播 MainActivity.java

Django自定義url（path）轉換器

需求1： 實現一個獲取電影列表的demo，使用者可以根據/movie/電影分類/的方式來獲取電影。其中電影分類採用的是分類1+分類2+分類3...的方式拼接的，並且如果只有一個分類，那就不需要加號。示例如下： # 1. 第一種：獲取action分類下的電影 /movie/action

自定義 Laravel （monolog）日誌位置,並增加請求ID

修改 bootstrap/app.php 檔案 $app->configureMonologUsing(function($monolog) use ($app) { $monolog->pushHandler( (new Monolog\Hand

Spring自定義Listener（監聽器）的使用

文章轉自：https://blog.csdn.net/L253272670/article/details/77715899          在java web專案中我們通常會有這樣的需求：當專案啟動時執行一些初始化操作，例如從資料庫載入全域性

左滑刪除 --- 自定義元件（優化）

想來想去  還是先引入元件吧 http://bmob-cdn-20610.b0.upaiyun.com/2018/11/20/736355a740c835f9806ee0d021ff6696.rar 複製以上鍊接   直接下載  之後壓縮  放進你的專案

解析網頁自定義字型（二）

解析網頁自定義字型（二） 介紹 背景知識 TrueType字型 fontTools 字型檔案解析庫 xml.dom.minidom xml程式碼解析庫 matplotlib 繪圖工具包 pytesseract oc

自定義View（1）

點操作：moveTo和lineTo和rLinneTo的理解 1、lineTo 用於進行直線繪製。起點預設為座標原點（左上），如果有path的存在，則是繪製的最後點為基準，座標點對應的（0,0）到lineTo（x,y）的偏移量 比如 /** * 線操作 * lineTo的偏移量相對於原

微信開發學習總結（四）——自定義選單（5）——個性化選單介面

一、個性化選單介面說明 為了幫助公眾號實現靈活的業務運營，微信公眾平臺新增了個性化選單介面，開發者可以通過該介面，讓公眾號的不同使用者群體看到不一樣的自定義選單。該介面開放給已認證訂閱號和已認證服務號。 開發者可以通過以下條件來設定使用者看到的選單： 1、使用者標籤（開發者的

微信開發學習總結（四）——自定義選單（4）——自定義選單事件推送

一、自定義選單事件推送介面說明 使用者點選自定義選單後，微信會把點選事件推送給開發者，請注意，點選選單彈出子選單，不會產生上報。請注意，第3個到第8個的所有事件，僅支援微信iPhone5.4.1以上版本，和Android5.4以上版本的微信使用者，舊版本微信使用者點選後將沒有迴應，開

微信開發學習總結（四）——自定義選單（3）——自定義選單刪除介面

自定義選單刪除介面 使用介面建立自定義選單後，開發者還可使用介面刪除當前使用的自定義選單。另請注意，在個性化選單時，呼叫此介面會刪除預設選單及全部個性化選單。 請求說明 http請求方式：GET https://api.weixin.qq.com/cgi-bin/menu/d

微信開發學習總結（四）——自定義選單（2）——自定義選單查詢介面

自定義選單查詢介面 使用介面建立自定義選單後，開發者還可使用介面查詢自定義選單的結構。另外請注意，在設定了個性化選單後，使用本自定義選單查詢介面可以獲取預設選單和全部個性化選單資訊。 請求說明 http請求方式：GET https://api.weixin.qq.com/cg

微信開發學習總結（四）——自定義選單（1）——自定義選單建立介面

一、自定義選單建立介面說明 自定義選單能夠幫助公眾號豐富介面，讓使用者更好更快地理解公眾號的功能。開啟自定義選單後，公眾號介面如圖所示： 請注意： ①自定義選單最多包括3個一級選單，每個一級選單最多包含5個二級選單。 ②一級選單最多4個漢字，二級選單最多7個漢字，多出來的部分將

Android自定義View（三）-Draw原理篇

Android自定義View通常需要經過measure、layout和draw過程。 如果你沒有了解過measure過程，可以先看看這篇文章。 如果你沒有了解過layout過程，可以先看看這篇文章。 一、draw的作用：繪製View檢視 二、draw過程：類似meas

MySql建立自定義函式（Function）

1.建立自定義函式 DELIMITER $$ DROP FUNCTION IF EXISTS genPerson$$ CREATE FUNCTION genPerson(name varchar(20)) RETURNS varchar(50) BEGIN DECLAR

Android 自定義View（一）

前言：可是有時候我們總感覺官方定義的一些基本元件不夠用，自定義元件就不可避免了。那麼如何才能做到像官方提供的那些元件一樣用xml來定義他的屬性呢？ 先總結下自定義View的步驟： 1、自定義View的屬性； 2、在View的構造方法中獲得自定義的屬性。 一、在re

自定義View（三） Matrix的原理解析

Matrix的英文是矩陣的意思，在Android中它起著座標對映、變換的功能。意思就是說我們在自定義view的時候，有時需要對圖表進行縮放、旋轉、轉移、錯切等操作，就需要對圖表的座標進行一定的轉換，此時就是Matrix在後臺起著轉換的作用。Matrix是一個三行三列的矩陣，大概長成下面那樣子，如

自定義View（二）View的事件分發機制原始碼解析

View的事件分發機制是Android中的一個難點，也是非常重要的知識點，充分理解和掌握事件分發機制有助於我們在自定義view的過程中更好地設計和解決事件相關問題。下面我們通過原始碼的角度去分析一下Android是怎麼處理view事件的。 一個事件（比如手指按下螢幕的down事件）首先傳遞到