安卓常用控制元件RecyclerView+HorizontalScrollView實現item側滑效果 安卓常用控制元件RecyclerView+HorizontalScrollView實現item側滑效果
阿新 • • 發佈：2018-10-31
原
安卓常用控制元件RecyclerView+HorizontalScrollView實現item側滑效果
2017年10月28日 12:23:14 低-調 閱讀數：538 更多<div class="tags-box space"> <span class="label">個人分類：</span> <a class="tag-link" href="https://blog.csdn.net/mhl18820672087/article/category/7226078" target="_blank">Android studio 常用控制元件應用 </a> </div> </div> <div class="operating"> </div> </div> </div> </div> <article> <div id="article_content" class="article_content clearfix csdn-tracking-statistics" data-pid="blog" data-mod="popu_307" data-dsm="post" style="height: 2391px; overflow: hidden;"> <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-e4c7a3727d.css"> <div class="htmledit_views">
簡單來介紹下RecyclerView,首先這個控制元件要做的事類似ListView,實際上它就是為了彌補ListView的不足而出現，那麼我們來看下它的簡單應用吧！
先上效果圖
RecyclerView是新增的控制元件，所以在使用這個控制元件時必須先在app/build.gradle檔案中新增依賴閉包（dependencies）
-
dependencies {
-
compile fileTree(dir: 'libs', include: ['*.jar'])
-
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
-
exclude group: 'com.android.support'
-
})
-
-
compile 'com.android.support:appcompat-v7:26.0.0-alpha1'
-
compile 'com.android.support:design:26.0.0-alpha1'
-
testCompile 'junit:junit:4.12'
-
compile'com.android.support:recyclerview-v7:24.2.1' //RecyclerView 的依賴閉包
-
compile 'com.google.android.gms:play-services-appindexing:8.4.0'
-
}
-
新增完後點擊Sync Now同步，到這裡所有的準備工作已經完成，現在開始正式使用RecyclerView,在佈局中的新增RecyclerView，在這裡，和往常新增的控制元件稍微不同，這裡新增控制元件不能只是給出RecyclerView的名字，要將完整的包路徑給出
-
<android.support.v7.widget.RecyclerView
-
android:id=
"@+id/notes_title_recycler_view"
-
android:layout_width=
"match_parent"
-
android:layout_height=
"match_parent"/>
好，到這裡，控制元件新增進來，一開始說它的功能類似於ListView,接下來當然時去新建一個子佈局（item）,下面這一長串的程式碼就是我定義的子佈局，其中裡面有一個自定義控制元件
com.example.haha.note.Note_delete（實現側滑的重要控制元件，下面會詳細介紹），從這裡就可以看出如果不是安卓SDK內建的控制元件，要使用統一要給出完整的路徑
-
<LinearLayout xmlns:android=
"http://schemas.android.com/apk/res/android"
-
android:layout_width=
"match_parent"
-
android:layout_height=
"80dp"
-
android:orientation=
"vertical"
-
android:background=
"@drawable/diy_frame"
-
android:layout_marginTop=
"10dp">
-
<com.example.haha.note.Note_delete
-
android:layout_width=
"match_parent"
-
android:layout_height=
"match_parent"
-
android:scrollbars=
"none">
-
<LinearLayout
-
android:layout_width=
"wrap_content"
-
android:layout_height=
"match_parent"
-
android:orientation=
"horizontal">
-
<RelativeLayout
-
android:id=
"@+id/left"
-
android:layout_width=
"match_parent"
-
android:layout_height=
"match_parent"
-
android:background=
"@drawable/item_bg">
-
<TextView
-
android:id=
"@+id/notes_title"
-
android:layout_width=
"match_parent"
-
android:layout_height=
"match_parent"
-
android:layout_gravity=
"center"
-
android:gravity=
"center_vertical"
-
android:maxLines=
"1"
-
android:ellipsize=
"end"
-
android:textSize=
"18sp"
-
android:paddingLeft=
"10dp"
-
android:paddingRight=
"10dp"
-
android:paddingTop=
"15dp"
-
android:paddingBottom=
"15dp"
-
/>
-
</RelativeLayout>
-
<RelativeLayout
-
android:id=
"@+id/right"
-
android:layout_width=
"200dp"
-
android:layout_height=
"match_parent"
-
android:layout_toRightOf=
"@+id/left">
-
<ImageView
-
android:id=
"@+id/edit_note"
-
android:layout_width=
"100dp"
-
android:layout_height=
"match_parent"
-
android:layout_gravity=
"center"
-
android:gravity=
"center"
-
android:src=
"@drawable/editor"
-
/>
-
<ImageView
-
android:id=
"@+id/tv_delete"
-
android:layout_width=
"match_parent"
-
android:layout_height=
"match_parent"
-
android:layout_gravity=
"center"
-
android:gravity=
"center"
-
android:layout_toRightOf=
"@+id/edit_note"
-
android:src=
"@drawable/cut"
-
/>
-
</RelativeLayout>
-
</LinearLayout>
-
</com.example.haha.note.Note_delete>
-
</LinearLayout>
子佈局定義完後，接下來還是老步驟，它和ListView一樣需要一個介面卡，現在我們去建立一個java類讓它繼承RecyclerView.Adapter,下面這一大段只需要理解 onCreateViewHolder()、onBindViewHolder()和getItemCount(),因為繼承自RecyclerView.Adapter就得重寫這3個方法
-
class NoteAdapter extends RecyclerView.Adapter<NoteAdapter.ViewHolder>{
-
private List<notes> mNoteList;
-
-
class ViewHolder extends RecyclerView.ViewHolder{
-
TextView noteTitleText;
-
ImageView deleteItem;
-
public ViewHolder(View view){
-
super(view);
-
noteTitleText=(TextView) view.findViewById(R.id.notes_title);
-
deleteItem=(ImageView)view.findViewById(R.id.tv_delete);
-
}
-
}
-
-
public NoteAdapter(List<notes> notesList){
-
-
mNoteList=notesList;
-
}
-
@Override
-
-
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType){
//載入子佈局時呼叫
-
View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.notes_item,parent,
false);
-
item_edit=(ImageView) view.findViewById(R.id.edit_note);
-
item_delete=(ImageView) view.findViewById(R.id.tv_delete);
-
final ViewHolder holder=
new ViewHolder(view);
-
item_edit.setOnClickListener(
new View.OnClickListener() {
-
public void onClick(View view) {
//RecyclerView的點選事件，這段程式碼和本文章無太大關係，所以可以忽略
-
notes note=mNoteList.get(holder.getAdapterPosition());
-
if(isTwoPane){
-
NotesContentFragment notesContentFragment=(NotesContentFragment) getFragmentManager().findFragmentById(R.id.notes_content_fragment);
-
notesContentFragment.refresh(note.getTitle(),note.getContent());
-
}
else {
-
notesContentActivity.actionStart(getActivity(),note.getTitle(),note.getContent());
-
}
-
}
-
});
-
return holder;
-
}
-
/*
-
新增刪除Item
-
*/
-
public void delete_item( List<notes> mNoteList,int position){
-
mNoteList.remove(position);
-
notifyItemRemoved(position);
-
notifyItemRangeChanged(position,mNoteList.size()-position);
-
}
-
-
public void onBindViewHolder(final ViewHolder holder, final int position){
-
//由onCreateViewHolder返回一個對應子佈局的holder,再由onBindViewHolder進行賦值
-
notes note=mNoteList.get(position);
-
holder.noteTitleText.setText(note.getTitle());
-
holder.deleteItem.setOnClickListener(
new View.OnClickListener() {
-
@Override
-
public void onClick(View view) {
-
delete_item(mNoteList,position);
-
}
-
});
-
}
-
-
-
-
public int getItemCount(){
-
return mNoteList.size();
-
}
-
-
-
}
介面卡類寫好之後，接下來介紹實現側滑的重要控制元件，com.example.haha.note.Note_delete 。這是個自定義控制元件，我們來看下它的程式碼
-
package com.example.haha.note;
-
-
import android.content.Context;
-
import android.util.AttributeSet;
-
import android.util.TypedValue;
-
import android.view.MotionEvent;
-
import android.view.ViewGroup;
-
import android.widget.HorizontalScrollView;
-
import android.widget.LinearLayout;
-
-
import
static android.R.id.content;
-
-
/**
-
* Created by haha on 2017/9/12.
-
*/
-
-
public
class Note_delete extends HorizontalScrollView{
-
private
int mScreenWidth;
//螢幕寬度
-
private
int mMenuWidth;
//選單寬度
-
-
private
boolean once;
-
public Note_delete(Context context, AttributeSet attrs){
-
super(context,attrs);
-
mScreenWidth=ScreenUtil.getScreenWidth(context);
//由安卓內建類ScreenUtil獲取螢幕寬度 ，注意要寫一個ScreenUtil類
-
}
-
-
protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec){
-
/*
-
* 自定義類是繼承自HorizontalScrollView，那麼意圖就非常明顯，就是要利用父類的水平滑動效果
-
* 而HorizontalScrollView這個控制元件只允許放一個子控制元件，一般來說，一個控制元件是遠遠不夠，那麼就
-
* 直接設定一個線性佈局，然後再線上性佈局裡放置任意我們想放的控制元件，這樣就解決了控制元件數量的
-
* 限制，所以下面的getChildAt(0)讓對應的就是設定的線性佈局，獲取物件，然後再由該物件獲取布
-
* 局中的控制元件物件，這樣所有控制元件物件都能取到*/
-
LinearLayout wrapper=(LinearLayout) getChildAt(
0);
-
ViewGroup menu=(ViewGroup) wrapper.getChildAt(
1);
//獲取線性佈局中的第二個控制元件物件
-
mMenuWidth=mScreenWidth/
2;
-
menu.getLayoutParams().width=mMenuWidth;
//給獲取的控制元件物件進行屬性設定
-
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
-
}
-
-
public boolean onTouchEvent(MotionEvent ev){
-
int action=ev.getAction();
-
switch (action){
-
case MotionEvent.ACTION_UP:
//觸碰擡起，判斷手指滑動距離
-
int scrollX=getScrollX();
-
if(scrollX > mMenuWidth/
4)
-
this.smoothScrollTo(mMenuWidth,
0);
-
else
-
this.smoothScrollTo(
0,
0);
-
return
true;
-
}
-
return
super.onTouchEvent(ev);
-
}
-
-
}
寫ScreenUtil類，用於獲取螢幕高寬度
-
package com.example.haha.note;
-
-
import android.content.Context;
-
import android.util.DisplayMetrics;
-
import android.view.WindowManager;
-
-
/**
-
* Created by haha on 2017/9/12.
-
*/
-
-
public
class ScreenUtil {
-
private ScreenUtil(){
-
throw
new UnsupportedOperationException(
"cannot be instantiated");
-
}
-
//獲得螢幕高度
-
public static int getScreenHeight(Context context){
-
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
-
DisplayMetrics outMetrics =
new DisplayMetrics();
-
wm.getDefaultDisplay().getMetrics(outMetrics);
-