Use image components to slide through photo albums and mobile phone photo album pages

The image component contains image views (ImageView), Image switcher (ImageSwitcher) And grid view (GridView).

chart 1 Image component inheritance diagram
As can be seen from the above figure ,ImageView Inherited from View, For rendering images ;ImageSwitcher Inherited from FrameLayout, So you can achieve animation effect ;GridView Inherited from AdapterView,AdapterView Inherited from ViewGroup(View Containers ), So it can contain multiple list items .

1 Image view

Image view (ImageView) Used to display any Drawable object .
<ImageView> The tag syntax format is as follows ：

<ImageView
 Property list 
>
</ImageView>

ImageView Supported by xml The attributes are shown in the table 1：

xml attribute	describe
andriod:adjustViewBounds	Set up ImageView Whether to adjust the border to maintain the aspect ratio of the displayed image
android:maxHeight	Set up ImageView The maximum height of , Premise andriod:adjustViewBounds by true
android:maxWidth	Set up ImageView The maximum width of , Premise andriod:adjustViewBounds by true
android:scaleType	Set how the displayed image zooms or moves to fit ImageView Size
android:src	Set up ImageView What is shown Drawable Object's ID
android:tint	For coloring pictures

surface 1 ImageView Supported by xml attribute

2 Image switcher

Image switcher (ImageSwitcher) It is used to realize the picture switching function with animation effect .
Common interfaces ：
setFactory()： by ImageSwitcher Class to set a ViewFactory, Used to separate the displayed picture from the parent window .
setImageResource()： Used to specify to be in ImageSwitcher Picture resources shown in .
ImageSwitcher： Realize sliding View album
MainActivity.java

public class MainActivity extends Activity {
    private int[] arrayPictures = new int[]{R.mipmap.img01, R.mipmap.img02, R.mipmap.img03,
            R.mipmap.img04, R.mipmap.img05, R.mipmap.img06,
            R.mipmap.img07, R.mipmap.img08, R.mipmap.img09,
    };
    private ImageSwitcher imageSwitcher;
    private int pictutureIndex;
    //  Finger pressed X coordinate 
    private float touchDownX;
    //  Fingers loose X coordinate 
    private float touchUpX;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        imageSwitcher = (ImageSwitcher) findViewById(R.id.imageswitcher);
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setImageResource(arrayPictures[pictutureIndex]);
                return imageView;
            }
        });
        imageSwitcher.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    //  Get finger pressed X coordinate 
                    touchDownX = event.getX();
                    return true;
                } else if (event.getAction() == MotionEvent.ACTION_UP) {
                    //  Get fingers loose X coordinate 
                    touchUpX = event.getX();
                    if (touchUpX - touchDownX > 100) {  //  From left to right , Look at the next one 
                        pictutureIndex = pictutureIndex == 0 ? arrayPictures.length - 1 : pictutureIndex - 1;
                        //  Animate picture switching 
                        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_in_left));
                        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_out_right));
                        //  Set the current picture to see 
                        imageSwitcher.setImageResource(arrayPictures[pictutureIndex]);
                    } else if (touchDownX - touchUpX > 100)  //  From right to left , Look at the last one 
                    {
                        pictutureIndex = pictutureIndex == arrayPictures.length - 1 ? 0 : pictutureIndex + 1;
                        //  Animate the switch 
                        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_out_left));
                        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_in_right));
                        //  Set the picture you want to see 
                        imageSwitcher.setImageResource(arrayPictures[pictutureIndex]);
                    }
                    return true;
                }
                return false;
            }
        });
    }
}

https://github.com/hanyuhang-hz/android-demos

3 Grid view

Grid view (GridView) According to the line , Column distribution to display multiple components .
<GridView> The basic syntax is as follows ：

<GridView
 Property list 
>
</GridView>

GridView Components support xml The attributes are shown in the table 2：

xml attribute	describe
android:columnWidth	Set the width of the column
android:gravity	Set alignment
android:stretchMode	Set stretch mode
android:numColumns	Set number of columns
android:horizontalSpacing	Set the horizontal spacing of each element
android:verticalSpacing	Set the vertical spacing of each element

surface 2 GridView Components support xml attribute
Adapter Class is an interface , It is the bridge between data and components , It can be used to GridView Provide data . Common implementation classes are as follows ：
(1)ArrayAdapter： Array adapter , Show a line of text .
(2)SimpleAdapter： Simple adapter , Usually used to apply List Multiple values of are wrapped into list items .
(3)SimpleCursorAdapter： The content of the database is displayed in the form of a list .
(4)BaseAdapter： abstract class , It can customize each list item to the greatest extent .
GridView： adopt BaseAdapter The adapter specifies how the content is created GridView, Realize the mobile photo album page
MainActivity.java

public class MainActivity extends Activity {
    private Integer[] picture = {R.mipmap.img01, R.mipmap.img02, R.mipmap.img03,
            R.mipmap.img04, R.mipmap.img05, R.mipmap.img06, R.mipmap.img07,
            R.mipmap.img08, R.mipmap.img09, R.mipmap.img10, R.mipmap.img11,
            R.mipmap.img12,};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GridView gridView= (GridView) findViewById(R.id.gridView);
        gridView.setAdapter(new ImageAdapter(this));
    }
    public class ImageAdapter extends BaseAdapter{
        private Context mContext;
        public ImageAdapter(Context c){
            mContext=c;
        }
        @Override
        public int getCount() {
            return picture.length;
        }
        @Override
        public Object getItem(int position) {
            return null;
        }
        @Override
        public long getItemId(int position) {
            return 0;
        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView;
            if(convertView==null){
                imageView=new ImageView(mContext);
                //  Set the width and height for the component 
                imageView.setLayoutParams(new GridView.LayoutParams(300, 176));
                //  Select the picture laying method 
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);


            }else{
                imageView= (ImageView) convertView;
            }
            imageView.setImageResource(picture[position]);
            return imageView;
        }
    }
}

GitHub - hanyuhang-hz/android-demos