In Android, use the GridView and ImageViewSwitcher to implement the simple function of the electronic album, gridviewimageview

In Android, use the GridView and ImageViewSwitcher to implement the simple function of the electronic album, gridviewimageview

When we view the album on our mobile phone, we first see a grid-like image display interface, and then we select the photo we want to enjoy and click to enter, so that we can view the photo in full screen, in addition, you can slide between the left and right to switch the photo. As shown in the following figure:

First, let's first list the knowledge points used for this implementation:

(1) On the home page, we need to implement it through the GridView. For the implementation code and explanations of the GridView, refer to my blog:

In Android, The GridView uses a custom adapter (not optimized) to arrange the image and text views.

(2) There are many ways to achieve the display of specific photos and the effect of switching between left and right (ViewPager, ViewFlipper, ImageViewSwitcher, etc.). Refer to the relevant blog post:

In Android, ViewPager is used to implement screen page switching and page switching. In Android, ViewFlipper is used to implement screen page switching (the problem about coordinate axes has been changed). In Android, ImageViewSwitcher is used to implement image switching and carousel navigation.

(3) intent must be used to redirect between activities and transfer the marked positions of photos, and putExtra and getExtra are used to pass in and obtain the marked positions of photos respectively.

(For more information about the use of intent, we will post a special blog post. Please stay tuned)

The following describes how to implement the function: Step 1: Create the homepage GridView Layout grid_layout.xml file in Layout:

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:orientation="vertical" android:layout_width="match_parent" 4     android:layout_height="match_parent"> 5     <GridView 6         android:id="@+id/gv" 7         android:layout_width="match_parent" 8         android:layout_height="wrap_content" 9         android:numColumns="auto_fit"10         android:verticalSpacing="10dp"11         android:gravity="center"12         android:horizontalSpacing="10dp"></GridView>13 </LinearLayout>

Step 2: Create the griditem_layout.xml file for each item in the GridView Layout in Layout:

 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     android:orientation="vertical" android:layout_width="wrap_content" 5     android:layout_height="wrap_content" 6     android:gravity="center"> 7     <ImageView 8         android:layout_width="wrap_content" 9         android:layout_height="wrap_content"10         android:adjustViewBounds="true"11         android:maxWidth="280dp"12         android:maxHeight="280dp"13         android:src="@mipmap/a1"14         android:id="@+id/imageView" />15 </LinearLayout>

The setting here requires proportional scaling based on the actual display image width and the container (mobile phone) resolution to be displayed to avoid layout confusion.

 

Step 3: Create the activity_main.xml file on the Image Display page (including navigation dots) in Layout:

Here, FrameLayout is used for the main layout, ImageSwitcher is used for layout switching, and linearlayout is used for navigation DOTS (which can be implemented through the configuration file ):

 1 <?xml version="1.0" encoding="utf-8"?> 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     xmlns:tools="http://schemas.android.com/tools" 4     android:id="@+id/activity_main" 5     android:layout_width="match_parent" 6     android:layout_height="match_parent" 7     tools:context="com.example.administrator.switcher.MainActivity"> 8     <ImageSwitcher 9         android:layout_width="match_parent"10         android:layout_height="match_parent"11         android:id="@+id/is">12     </ImageSwitcher>13     <LinearLayout14         android:id="@+id/point_layout"15         android:layout_width="match_parent"16         android:layout_height="wrap_content"17         android:layout_gravity="bottom"18         android:orientation="horizontal">19         <ImageView20             android:layout_width="wrap_content"21             android:layout_height="wrap_content"22             android:layout_weight="1"23             android:src="@mipmap/default_holo"/>24         <ImageView25             android:layout_width="wrap_content"26             android:layout_height="wrap_content"27             android:layout_weight="1"28             android:src="@mipmap/default_holo"/>29         <ImageView30             android:layout_width="wrap_content"31             android:layout_height="wrap_content"32             android:layout_weight="1"33             android:src="@mipmap/default_holo"/>34         <ImageView35             android:layout_width="wrap_content"36             android:layout_height="wrap_content"37             android:layout_weight="1"38             android:src="@mipmap/default_holo"/>39     </LinearLayout>40 </FrameLayout>

Step 4: Implementation Code of Activity in Java, implementation code of Home Page GridView GridActivity. java:

For more information, see

In Android, The GridView uses a custom adapter (not optimized) to arrange the image and text views.

The getview method in this custom adapter has been optimized:

 

1 import android. content. intent; 2 import android. support. v7.app. appCompatActivity; 3 import android. OS. bundle; 4 import android. view. view; 5 import android. view. viewGroup; 6 import android. widget. adapterView; 7 import android. widget. baseAdapter; 8 import android. widget. gridView; 9 import android. widget. imageView; 10 public class GridActivity extends AppCompatActivity {11 private GridView gv; 12 int [] Images = {R. mipmap. a1, R. mipmap. a2, R. mipmap. a3, R. mipmap. a4}; 13 @ Override14 protected void onCreate (Bundle savedInstanceState) {15 super. onCreate (savedInstanceState); 16 setContentView (R. layout. grid_layout); 17 gv = (GridView) findViewById (R. id. gv); 18 gv. setAdapter (new MyAdapter (); 19 // set to click event 20 gv for each item in the GridView. setOnItemClickListener (new AdapterView. onItemClickListener () {21 @ Override22 public voi D onItemClick (AdapterView <?> Parent, View view, int position, long id) {23 // use intend to obtain the Activity to interact, that is, the interface to jump to 24 Intent intent = new Intent (GridActivity. this, MainActivity. class); 25 // use the putExtra method of intent to obtain the subscript position of the clicked image (used for data transmission between activities) 26 intent. putExtra ("select", position); 27 // start the Activity to interact with (by passing in the intent containing the Activity) 28 startActivity (intent); 29} 30 }); 31} 32 class MyAdapter extends BaseAdapter {33 34 @ Override35 public int getCount () {36 return images. length; 37} 38 39 @ Override40 public Object getItem (int position) {41 return images [position]; 42} 43 44 @ Override45 public long getItemId (int position) {46 return position; 47} 48 49 @ Override50 public View getView (int position, View convertView, ViewGroup parent) {51 ViewHolder VL; 52 if (convertView = null) {53 convertView = getLayoutInflater (). inflate (R. layout. griditem_layout, null); 54 VL = new ViewHolder (); 55 Vl. iv = (ImageView) convertView. findViewById (R. id. imageView); 56 convertView. setTag (vh); 57} 58 VL = (ViewHolder) convertView. getTag (); 59 consecutive seconds. iv. setImageResource (images [position]); 60 return convertView; 61} 62 class ViewHolder {63 ImageView iv; 64} 65} 66}

 

Step 5: implement the Activity code in Java. The ImageSwicher implementation code after the jump MainActivity. java:

Refer to blog

Use ImageViewSwitcher in Android to implement image switching and carousel navigation

 

1 import android. content. intent; 2 import android. support. v7.app. appCompatActivity; 3 import android. OS. bundle; 4 import android. view. motionEvent; 5 import android. view. view; 6 import android. widget. imageSwitcher; 7 import android. widget. imageView; 8 import android. widget. linearLayout; 9 import android. widget. viewSwitcher; 10 import java. util. arrayList; 11/** 12 * Created by panchengjia on 2016/12 /05. 13 */14 public class MainActivity extends AppCompatActivity implements ViewSwitcher. viewFactory, View. onTouchListener {15 private ImageSwitcher is; // declare the ImageSwitcher layout 16 private LinearLayout point_layout; // declare the layout of the navigation bullets 17 // array of image IDS (which must match the image resource array in GridActivity) 18 int [] images = {R. mipmap. a1, R. mipmap. a2, R. mipmap. a3, R. mipmap. a4}; 19 // instantiate a set of 20 ArrayList storing navigation dots <ImageView> points = new ArrayList <> (); 2 1 int index; // declare the index to record the subscript 22 float startX of the image id array; // The coordinates of X when the finger contacts the screen (demonstrate sliding left and right) 23 float endX; // coordinates when the finger leaves the screen (slide between left and right) 24 25 @ Override 26 protected void onCreate (Bundle savedInstanceState) {27 super. onCreate (savedInstanceState); 28 setContentView (R. layout. activity_main); 29 // get intent 30 Intent intent = getIntent (); 31 // obtain the image subscript in GridActivity and set the default value 32 index = intent at will. getIntExtra ("select", 0); 33 is = (ImageSwitcher) findViewById (R. id. is); 34 is. setFactory (this); // implement ImageSwitcher 35 initpoint (); 36 is. setOnTouchListener (this); // set the touch event 37} 38 // Method for initializing the navigation DOT 39 private void initpoint () {40 point_layout = (LinearLayout) findViewById (R. id. point_layout); 41 int count = point_layout.getChildCount (); // obtain the number of circle points in the layout 42 for (int I = 0; I <count; I ++) {43 // Add the dot in the layout to 44 points in the dot set. add (ImageView) p Oint_layout.getChildAt (I); 45} 46 // set the dot status of the selected image in GridActivity to the touch solid status 47 points. get (index ). setImageResource (R. mipmap. touched_holo); 48} 49 // set the status of the navigation origin corresponding to the selected image to 50 public void setImageBackground (int selectImage) {51 for (int I = 0; I <points. size (); I ++) {52 // if the subscript of the selected image is equal to the id of the lower mark in the dot set, the dot state is changed to 53 if (I = selectImage) {54 points. get (I ). setImageResource (R. mipmap. touched_holo); 55} else {56 points. get (I ). setImag EResource (R. mipmap. default_holo); 57} 58} 59} 60 // instantiate imageView using the ViewFactory method (ImageView attributes are not set here) 61 @ Override 62 public View makeView () {63 // instantiate an ImageView for switching 64 ImageView iv = new ImageView (this); 65 iv. setScaleType (ImageView. scaleType. FIT_XY); 66 // The first view displayed by default is images [index] (the picture jump from the home page) 67 iv. setImageResource (images [index]); 68 return iv; 69} 70 @ Override 71 public boolean onTouch (View V, MotionEvent event) {72 // press screen 73 if (event. getAction () = MotionEvent. ACTION_DOWN) {74 startX = event. getX (); // obtain the coordinate 75 of the X axis when the screen is pressed // lift the finger 76} else if (event. getAction () = MotionEvent. ACTION_UP) {77 endX = event. getX (); 78 // determine that the ending coordinate is greater than the starting coordinate and is the next one (to avoid misoperation, set 30 judgment intervals) 79 if (startX-endX> 30) {80 // if the current image is the last image, 81 index = index + 1 <images. length? ++ Index: 0; 82 // use the system's built-in switch in/out animation effect (you can also customize the animation effect as in ViewFlipper) 83 is. setInAnimation (this, android. r. anim. fade_in); 84 is. setOutAnimation (this, android. r. anim. fade_out); 85 86 // when the end coordinate is smaller than the start coordinate, the last one is used (to avoid misoperation, set the 30 judgment range) 87} else if (endX-startX> 30) {88 // determine that the current image is already the first image, then the last image in the group is 89 index = index-1> = 0? -- Index: images. length-1; 90 is. setInAnimation (this, android. r. anim. fade_in); 91 is. setOutAnimation (this, android. r. anim. fade_out); 92} 93 // set ImageSwitcher's image resource 94 is. setImageResource (images [index]); 95 // call the method to set the corresponding status of the dot 96 setImageBackground (index); 97} 98 return true; 99} 100}

 

This code is over now. As mentioned above, you can try multiple implementation methods. The intent used this time will be detailed later.