APP homepage carousel for Android custom controls, android controls

Source: Internet
Author: User

APP homepage carousel for Android custom controls, android controls

At present, most of the home pages of Android applications have carousel images, which are like this (this figure is a diagram in a reprinted blog and used directly ):


I believe most applications will use such components. This article is a custom component that can dynamically set the number of images. Next, let's start this custom tour. First, let's take a look at the layout file of the custom control:

<? Xml version = "1.0" encoding = "UTF-8"?> <RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent"> <android. support. v4.view. viewPager android: id = "@ + id/viewPager" android: layout_width = "match_parent" android: layout_height = "match_parent"/> <span style = "white-space: pre "> </span> <! -- This LinearLayout is used for small dots --> <LinearLayout android: id = "@ + id/linearlayout" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_alignParentBottom = "true" android: gravity = "center" android: orientation = "horizontal" android: padding = "5dp"> </LinearLayout> </RelativeLayout>
After reading the layout file, let's take a look at the java class corresponding to the custom control:
The Code is as follows:

Package com. gc. view; import java. util. arrayList; import java. util. list; import java. util. concurrent. executors; import java. util. concurrent. scheduledExecutorService; import java. util. concurrent. timeUnit; import com. gc. image. imageLoaderWraper; import com. gc. testviewpagerfragment. r; import android. annotation. suppressLint; import android. content. context; import android. graphics. drawable. drawable; import android. o S. handler; import android. OS. message; import android. OS. parcelable; import android. support. v4.view. pagerAdapter; import android. support. v4.view. viewPager; import android. support. v4.view. viewPager. onPageChangeListener; import android. util. attributeSet; import android. view. layoutInflater; import android. view. view; import android. widget. frameLayout; import android. widget. imageView; import android. widget. imageVi Ew. scaleType; import android. widget. linearLayout; import android. widget. relativeLayout;/*** custom view of carousel image advertisement implemented by ViewPager; * supports automatic carousel page and gesture slide switching page, you can dynamically set the number of images * @ author Android General **/@ SuppressLint ("HandlerLeak") public class SlideShowView extends FrameLayout {private ImageLoaderWraper imageLoaderWraper; // use UIL open-source framework, it is mainly used to load images to prevent OOM private final static boolean isAutoPlay = true; private List <String> imageUris; Private List <ImageView> imageViewsList; private List <ImageView> dotViewsList; private LinearLayout mLinearLayout; private ViewPager mViewPager; private int currentItem = 0; private callback; @ handle ("HandlerLeak ") private Handler handler = new Handler () {@ Override public void handleMessage (Message msg) {// TODO Auto-generated method stub super. hand LeMessage (msg); mViewPager. setCurrentItem (currentItem) ;}}; public SlideShowView (Context context) {this (context, null) ;}public SlideShowView (Context context, AttributeSet attrs) {this (Context, attrs, 0);} public SlideShowView (Context context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle); // TODO Auto-generated constructor stub initUI (context ); if (! (ImageUris. size () <= 0) {System. out. println ("XXXXXXXXXXXX"); setImageUris (imageUris);} if (isAutoPlay) {startPlay () ;}} private void initUI (Context context) {imageViewsList = new ArrayList <ImageView> (); dotViewsList = new ArrayList <ImageView> (); imageUris = new ArrayList <String> (); imageLoaderWraper = ImageLoaderWraper. getInstance (context. getApplicationContext (); LayoutInflater. from (context ). inflate (R. layout. layout_slideshow, this, true); mLinearLayout = (LinearLayout) findViewById (R. id. linearlayout); mViewPager = (ViewPager) findViewById (R. id. viewPager);} public void setImageUris (List <String> imageuris) {for (int I = 0; I <imageuris. size (); I ++) {imageUris. add (imageuris. get (I); System. out. println ("YYYYYYYYYY");} LinearLayout. layoutParams lp = new LinearLayout. layoutParams (LinearLayout. layoutParams. WRAP_CONTENT, LinearLayout. layoutParams. WRAP_CONTENT); lp. setMargins (5, 0, 0, 0); for (int I = 0; I <imageUris. size (); I ++) {ImageView imageView = new ImageView (getContext (); imageView. setScaleType (ScaleType. FIT_XY); // overlay the screen System. out. println ("GGGGG:" + imageUris. get (I); imageLoaderWraper. displayImage (imageUris. get (I), imageView); // use an open-source framework to load images. You can modify the image by yourself. Use setsetBackgroundResource to configure System. out. println ("JJJJJJ" ); ImageViewsList. add (imageView); System. out. println ("JJJJJJ55555"); ImageView viewDot = new ImageView (getContext (); System. out. println ("jjjjj88888"); if (I = 0) {viewDot. setBackgroundResource (R. drawable. dot_black);} else {viewDot. setBackgroundResource (R. drawable. dot_white);} // viewDot. setImageResource (R. drawable. dot_white); System. out. println ("JJJJJJ9999"); viewDot. setLayoutParams (lp); dotView SList. add (viewDot); mLinearLayout. addView (viewDot);} mViewPager. setFocusable (true); mViewPager. setAdapter (new MyPagerAdapter (); mViewPager. setOnPageChangeListener (new MyPageChangeListener ();} private void startPlay () {scheduledExecutorService = Executors. newSingleThreadScheduledExecutor (); scheduledExecutorService. scheduleAtFixedRate (new SlideShowTask (), 1, 4, TimeUnit. SECONDS) ;}@ SuppressWar Nings ("unused") private void stopPlay () {scheduledExecutorService. shutdown ();}/*** set the background of the selected tip * @ param selectItems */private void setImageBackground (int selectItems) {for (int I = 0; I <dotViewsList. size (); I ++) {if (I = selectItems) {dotViewsList. get (I ). setBackgroundResource (R. drawable. dot_black);} else {dotViewsList. get (I ). setBackgroundResource (R. drawable. dot_white) ;}} private class MyPagerA Dapter extends PagerAdapter {@ Override public void destroyItem (View container, int position, Object object) {// TODO Auto-generated method stub // (ViewPag. er) container ). removeView (View) object); (ViewPager) container ). removeView (imageViewsList. get (position) ;}@ Override public Object instantiateItem (View container, int position) {// TODO Auto-generated method stub (ViewPager) container ). addVie W (imageViewsList. get (position); return imageViewsList. get (position) ;}@ Override public int getCount () {// TODO Auto-generated method stub return imageViewsList. size () ;}@ Override public boolean isViewFromObject (View arg0, Object arg1) {// TODO Auto-generated method stub return arg0 = arg1 ;} @ Override public void restoreState (Parcelable arg0, ClassLoader arg1) {// TODO Auto-generated method Stub} @ Override public Parcelable saveState () {// TODO Auto-generated method stub return null;} @ Override public void startUpdate (View arg0) {// TODO Auto-generated method stub} @ Override public void finishUpdate (View arg0) {// TODO Auto-generated method stub} private class MyPageChangeListener implements OnPageChangeListener {boolean isAutoPlay = false; @ Override public void onPageScrol LStateChanged (int arg0) {// TODO Auto-generated method stub switch (arg0) {case 1: isAutoPlay = false; break; case 2: isAutoPlay = true; break; case 0: if (mViewPager. getCurrentItem () = mViewPager. getAdapter (). getCount ()-1 &&! IsAutoPlay) {mViewPager. setCurrentItem (0);} else if (mViewPager. getCurrentItem () = 0 &&! IsAutoPlay) {mViewPager. setCurrentItem (mViewPager. getAdapter (). getCount ()-1) ;}break ;}@ Override public void onPageScrolled (int arg0, float arg1, int arg2) {// TODO Auto-generated method stub} @ Override public void onPageSelected (int pos) {// TODO Auto-generated method stub setImageBackground (pos % imageUris. size () ;}} private class SlideShowTask implements Runnable {@ Override public vo Id run () {// TODO Auto-generated method stub synchronized (mViewPager) {currentItem = (currentItem + 1) % imageViewsList. size (); handler. obtainMessage (). sendToTarget () ;}}@ SuppressWarnings ("unused") private void destoryBitmaps () {for (int I = 0; I <imageViewsList. size (); I ++) {ImageView imageView = imageViewsList. get (I); Drawable drawable = imageView. getDrawable (); if (drawable! = Null) {drawable. setCallback (null );}}}}
After talking about the layout of the custom control and corresponding classes, we will use it. So how can we use this? Please refer to the following content.
If you want to use the custom control in your project, you need to copy the layout file of the custom control to your layout folder, copy the above class to your project and reference the control in your own layout file. The Code is as follows:


<Com. gc. view. slideShowView android: id = "@ + id/slideshowView" android: layout_width = "fill_parent" android: layout_height = "140dp" android: layout_marginTop = "10dp" android: layout_marginLeft = "5dp" android: layout_marginRight = "5dp"/> <! -- Com. gc. view is the package name where SlideShowView is located. You need to replace this package name with your own package name when using -->
Then, dynamically set the image in the corresponding Activity or Fragment as follows:
(1) obtain the control through findviewbyid]

(2) method to call the setImageUris of the control

The Code is as follows:

<Span style = "white-space: pre"> </span> List <String> imageUris = new ArrayList <String> (); imageUris. add ("http://e.hiphotos.baidu.com/image/pic/item/d6ca7bcb0a46f21ffac59520f4246b600d33aed4.jpg"); imageUris. add ("http://a.hiphotos.baidu.com/image/pic/item/ac345982b2b7d0a2549f27eac9ef76094b369a76.jpg"); imageUris. add ("http:// B .hiphotos.baidu.com/image/pic/item/d52a2834349b033b12e5c3c317ce36d3d539bdbd.jpg"); imageUris. add ("assets: // one.jpg"); imageUris. add ("assets: // two.jpg"); imageUris. add ("assets: // three.jpg"); // the above Code initializes the URI path of the image <span style = "font-family: Arial, Helvetica, sans-serif; "> <span style =" white-space: pre "> </span> mSlideShowView = (SlideShowView) findViewById (R. id. slideshowView); </span> <span style = "font-family: Arial, Helvetica, sans-serif;"> <span style = "white-space: pre "> </span> mSlideShowView. setImageUris (imageUris); </span>
Then the effect in the application is as follows:

Well, this is the use of the custom control. I believe you should also understand that if you are welcome to point out something wrong, or if you do not understand it, you can reply to the message.

Reprinted please indicate the source: http://blog.csdn.net/android_jiangjun/article/details/39638129



Viewpager obtains network images for image carousel (android)

No. The error LOG is posted. You only know who is not a fairy. Besides, you also ensure that your program is correct. What do you say !!!!

[Android instance] custom controls-advanced image scaling and mobile Processing

Well, you can send the source code to see it, ah xie774505257@163.com
 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.