獲取多張本地圖片,以及顯示圖片

先看獲取多張本地圖片的效果圖:java

 

而後加入權限:android

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA"/>

加入依賴: git

  allprojects {
        repositories {
            maven { url 'https://jitpack.io' }
            maven { url 'https://maven.google.com' }
        }
    }

 

implementation 'com.github.open-android:ImageSelector:0.1.0'

給佈局文件加一個選擇圖片的按鈕,以及顯示圖片路徑的文本:github

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:orientation="vertical"
 8     android:gravity="center_horizontal"
 9     tools:context=".MainActivity">
10 
11     <Button
12         android:text="選擇圖片"
13         android:onClick="selectImg"
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         tools:ignore="OnClick" />
17     <TextView
18         android:layout_marginTop="10dp"
19         android:id="@+id/txtImg"
20         android:layout_width="wrap_content"
21         android:layout_height="wrap_content" />
22 </LinearLayout>

最後就是實現代碼了,直接上代碼:app

 1 public class MainActivity extends AppCompatActivity {
 2 
 3     //顯示圖片路徑的文本
 4     private TextView txtImg;
 5     private int REQUEST_CODE_SELECT_IMG = 1;
 6     private int MAX_SELECT_COUNT = 9;
 7     //圖片路徑集合
 8     private List<String> imgDatas;
 9 
10     @Override
11     protected void onCreate(Bundle savedInstanceState) {
12         super.onCreate(savedInstanceState);
13         setContentView(R.layout.activity_main);
14         txtImg = (TextView)findViewById(R.id.txtImg);
15     }
16 
17     @Override
18     protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
19         super.onActivityResult(requestCode, resultCode, data);
20         if(requestCode == REQUEST_CODE_SELECT_IMG){
21             showContent(data);
22             return;
23         }
24     }
25 
26     private void showContent(Intent data){
27         imgDatas = ImageSelector.getImagePaths(data);
28         if(imgDatas.isEmpty()){
29             return;
30         }
31         txtImg.setText(imgDatas.toString());
32     }
33 
34     public void selectImg(View view){
35         ImageSelector.show(this,REQUEST_CODE_SELECT_IMG,MAX_SELECT_COUNT);
36     }
37 }

 

接下來實現獲取到本地的圖片顯示在列表中,先看一下顯示圖片的效果圖:maven

再加一個卡片效果依賴:ide

implementation 'com.google.android.material:material:1.0.0'

建立一個圖片的Item佈局文件item_image.xml:佈局

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical"
 4     xmlns:app="http://schemas.android.com/apk/res-auto"
 5     android:gravity="center"
 6     android:layout_margin="10dp"
 7     android:layout_width="match_parent"
 8     android:layout_height="wrap_content">
 9 
10     <androidx.cardview.widget.CardView
11         android:layout_width="wrap_content"
12         app:cardCornerRadius="10dp"
13         android:layout_margin="3dp"
14         android:layout_height="wrap_content">
15         <ImageView
16             android:id="@+id/image"
17             android:scaleType="fitXY"
18             android:layout_width="150dp"
19             android:layout_height="150dp" />
20     </androidx.cardview.widget.CardView>
21 
22 </LinearLayout>

須要在佈局文件中加一個RecyclerView實現圖片列表,我直接去掉以前的顯示圖片路徑文本,而後加入RecyclerView控件activity_main.xml:this

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:orientation="vertical"
 8     android:gravity="center_horizontal"
 9     android:padding="10dp"
10     tools:context=".MainActivity">
11 
12     <Button
13         android:text="選擇圖片"
14         android:onClick="selectImg"
15         android:layout_width="wrap_content"
16         android:layout_height="wrap_content"
17         tools:ignore="OnClick" />
18 
19     <androidx.recyclerview.widget.RecyclerView
20         android:id="@+id/recycler"
21         android:layout_marginTop="5dp"
22         android:layout_width="match_parent"
23         android:layout_height="match_parent"/>
24 
25 </LinearLayout>

新建一個實現圖片列表的適配器:google

 1 public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ViewHolder> {
 2 
 3     private Context mContext;
 4     private List<String> list;
 5 
 6     public ImageAdapter(Context context, List<String> stringList){
 7         this.mContext = context;
 8         this.list = stringList;
 9     }
10 
11     @NonNull
12     @Override
13     public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
14         return new ViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item_image,null));
15     }
16 
17     @Override
18     public int getItemCount() {
19         return list.size();
20     }
21 
22     public void add(String item){
23         int position = list.size();
24         list.add(item);
25         notifyItemChanged(position);
26     }
27 
28     public void add(int position,String item){
29         list.add(position,item);
30         notifyItemChanged(position);
31     }
32 
33     @Override
34     public void onBindViewHolder(@NonNull ViewHolder holder, final int position) {
35         holder.image.setImageURI(Uri.fromFile(new File(list.get(position))));
36         holder.image.setOnClickListener(new View.OnClickListener() {
37             @Override
38             public void onClick(View view) {
39                 remove(position);
40             }
41         });
42     }
43 
44     public void remove(int position){
45         list.remove(position);
46         notifyItemRemoved(position);
47         notifyItemRangeChanged(position,list.size());
48     }
49 
50     public class ViewHolder extends  RecyclerView.ViewHolder{
51         public ViewHolder(@NonNull View itemView) {
52             super(itemView);
53             image = itemView.findViewById(R.id.image);
54         }
55         private ImageView image;
56     }
57 }

最後就是實現代碼了:
定義一個返回值,和一個最大選圖片數量

private int REQUEST_CODE_SELECT_IMG = 1;
private int MAX_SELECT_COUNT = 9;

新建一個綁定適配器的類,而後放到showCount的方法下調用:

1 private void initView(){
2         recyclerView = (RecyclerView)findViewById(R.id.recycler);
3         recyclerView.setLayoutManager(new GridLayoutManager(this,3));
4         adapter = new ImageAdapter(this,imgDatas);
5         recyclerView.setAdapter(adapter);
6     }

貼上代碼:

 1 public class MainActivity extends AppCompatActivity {
 2 
 3     private int REQUEST_CODE_SELECT_IMG = 1;
 4     private int MAX_SELECT_COUNT = 9;
 5     //圖片路徑集合
 6     private List<String> imgDatas;
 7     private ImageAdapter adapter;
 8     private RecyclerView recyclerView;
 9 
10     @Override
11     protected void onCreate(Bundle savedInstanceState) {
12         super.onCreate(savedInstanceState);
13         setContentView(R.layout.activity_main);
14     }
15 
16     @Override
17     protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
18         super.onActivityResult(requestCode, resultCode, data);
19         if(requestCode == REQUEST_CODE_SELECT_IMG){
20             showContent(data);
21             return;
22         }
23     }
24 
25     private void showContent(Intent data){
26         imgDatas = ImageSelector.getImagePaths(data);
27         if(imgDatas.isEmpty()){
28             return;
29         }
30         initView();
31     }
32 
33     private void initView(){
34         recyclerView = (RecyclerView)findViewById(R.id.recycler);
35         recyclerView.setLayoutManager(new GridLayoutManager(this,3));
36         adapter = new ImageAdapter(this,imgDatas);
37         recyclerView.setAdapter(adapter);
38     }
39 
40     public void selectImg(View view){
41         ImageSelector.show(this,REQUEST_CODE_SELECT_IMG,MAX_SELECT_COUNT);
42     }
43 }
相關文章
相關標籤/搜索