Android UI - 实现广告Banner旋转木马效果

前言

本篇博客要分享的一个效果是实现广告Banner轮播效果，这个效果也比較常见，一些视频类应用就常常有，就拿360影视大全来举例吧：

用红框框住的那个效果就是小巫今天要分享的，先来思考一下会用到什么控件？有什么用户体验？

控件我们可能一下子就能够想到的自然是ViewPager,没错！用到的就是ViewPager,那么它会有什么用户体验呢，它可能有以下几个体验：

1. 间隔不停的切换图片，指示器也跟着变

2. 点击图片能够跳转到指定的页面

怎样实现？

布局開始着手

/BannerAutoScrollDemo/res/layout/banner.xml

<?

xml version="1.0" encoding="utf-8"?

>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <FrameLayout

        android:layout_width="match_parent"

        android:layout_height="210dp" >

        <android.support.v4.view.ViewPager

            android:id="@+id/vp"

            android:layout_width="match_parent"

            android:layout_height="210dp" />

        <RelativeLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_gravity="bottom"

            android:background="@drawable/shadow_article" >

            <TextView

                android:id="@+id/tv_date"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_above="@+id/author_layout"

                android:layout_marginBottom="10dp"

                android:layout_marginLeft="10dp"

                android:maxLines="2"

                android:text="3月4日"

                android:textColor="@color/white"

                android:textSize="18sp" />

            <TextView

                android:id="@+id/tv_title"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_above="@+id/author_layout"

                android:layout_marginBottom="10dp"

                android:layout_marginLeft="10dp"

                android:layout_marginRight="10dp"

                android:layout_toRightOf="@+id/tv_date"

                android:maxLines="2"

                android:text="我和令计划仅仅是同姓"

                android:textColor="@color/white"

                android:textSize="18sp" />

            <RelativeLayout

                android:id="@+id/author_layout"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:layout_alignParentBottom="true"

                android:layout_marginLeft="10dp"

                android:gravity="center_vertical"

                android:paddingBottom="20dp" >

                <TextView

                    android:id="@+id/tv_pre"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="文章选题来自"

                    android:textColor="@color/white"

                    android:textSize="12sp" />

                <TextView

                    android:id="@+id/tv_topic_from"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_toRightOf="@+id/tv_pre"

                    android:text="阿宅的"

                    android:textColor="@color/white"

                    android:textSize="12sp" />

                <TextView

                    android:id="@+id/tv_topic"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_marginLeft="10dp"

                    android:layout_toRightOf="@+id/tv_topic_from"

                    android:text="“我想知道令狐安和令计划有什么关系？”"

                    android:textColor="@color/white"

                    android:textSize="12sp" />

            </RelativeLayout>

        </RelativeLayout>

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginTop="10dip"

            android:layout_gravity="bottom|center_horizontal"

            android:layout_marginBottom="10dp"

            android:gravity="center" >

            <View

                android:id="@+id/v_dot0"

                style="@style/dot_style"

                android:background="@drawable/dot_focused"

                android:visibility="invisible" />

            <View

                android:id="@+id/v_dot1"

                style="@style/dot_style"

                android:visibility="invisible"/>

            <View

                android:id="@+id/v_dot2"

                style="@style/dot_style"

                android:visibility="invisible"/>

            <View

                android:id="@+id/v_dot3"

                style="@style/dot_style"

                android:visibility="invisible"/>

            <View

                android:id="@+id/v_dot4"

                style="@style/dot_style"

                android:visibility="invisible" />

        </LinearLayout>

    </FrameLayout>

</LinearLayout>

一个ViewPager,以下五个指示点。注意每一个点都有相同的样式，我们在style.xml中定义样式：

/BannerAutoScrollDemo/res/values/styles.xml

 <style name="dot_style">

        <item name="android:layout_width">5dip</item>

        <item name="android:layout_height">5dip</item>

        <item name="android:background">@drawable/dot_normal</item>

        <item name="android:layout_marginLeft">1.5dip</item>

        <item name="android:layout_marginRight">1.5dip</item>

    </style>

定义圆点图形资源

/BannerAutoScrollDemo/res/drawable/dot_normal.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="oval" >

    <solid android:color="#33000000" />

    <corners android:radius="5dip" />

</shape>

/BannerAutoScrollDemo/res/drawable/dot_focused.xml 

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="oval" >

    <solid android:color="#aaFFFFFF" />

    <corners android:radius="5dip" />

</shape>

定义广告实体

/BannerAutoScrollDemo/src/com/xiaowu/banner/demo/AdDomain.java 

package com.xiaowu.banner.demo;

/**

 * 广告实体

 *

 * @author wwj_748

 *

 */

public class AdDomain {

	private String id; // 广告id

	private String date; // 日期

	private String title; // 标题

	private String topicFrom; //选题来自

	private String topic; // 选题

	private String imgUrl; // 图片url

	private boolean isAd; // 是否为广告

	private String startTime; // 广告開始时间

	private String endTime; // 广告结束时间

	private String targetUrl; // 目标url

	private int width; // 宽

	private int height; // 高

	private boolean available; // 是否可用

	public String getId() {

		return id;

	}

	public void setId(String id) {

		this.id = id;

	}

	public String getTitle() {

		return title;

	}

	public void setTitle(String title) {

		this.title = title;

	}

	public String getImgUrl() {

		return imgUrl;

	}

	public void setImgUrl(String imgUrl) {

		this.imgUrl = imgUrl;

	}

	public boolean isAd() {

		return isAd;

	}

	public void setAd(boolean isAd) {

		this.isAd = isAd;

	}

	public String getDate() {

		return date;

	}

	public void setDate(String date) {

		this.date = date;

	}

	public String getTopic() {

		return topic;

	}

	public void setTopic(String topic) {

		this.topic = topic;

	}

	public String getTopicFrom() {

		return topicFrom;

	}

	public void setTopicFrom(String topicFrom) {

		this.topicFrom = topicFrom;

	}

	public String getStartTime() {

		return startTime;

	}

	public void setStartTime(String startTime) {

		this.startTime = startTime;

	}

	public String getEndTime() {

		return endTime;

	}

	public void setEndTime(String endTime) {

		this.endTime = endTime;

	}

	public String getTargetUrl() {

		return targetUrl;

	}

	public void setTargetUrl(String targetUrl) {

		this.targetUrl = targetUrl;

	}

	public int getWidth() {

		return width;

	}

	public void setWidth(int width) {

		this.width = width;

	}

	public int getHeight() {

		return height;

	}

	public void setHeight(int height) {

		this.height = height;

	}

	public boolean isAvailable() {

		return available;

	}

	public void setAvailable(boolean available) {

		this.available = available;

	}

}

实现切换逻辑

1. 定时切换

2. 切换图片

3. 切换标题

4. 切换指示器

定时切换用到一个类：ScheduledExecutorService

作用是定时运行任务，我们这里要做的定时任务是，2秒运行一次图片切换

private void startAd() {

		scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();

		// 当Activity显示出来后。每两秒切换一次图片显示

		scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2,

				TimeUnit.SECONDS);

	}

定义子线程 

private class ScrollTask implements Runnable {

		@Override

		public void run() {

			synchronized (adViewPager) {

				currentItem = (currentItem + 1) % imageViews.size();

				handler.obtainMessage().sendToTarget();

			}

		}

	}

通过handle来通知ViewPager进行视图切换 

private Handler handler = new Handler() {

		public void handleMessage(android.os.Message msg) {

			adViewPager.setCurrentItem(currentItem);

		};

	};

我们提供模拟数据来进行測试 

/**

	 * 轮播广播模拟数据

	 *

	 * @return

	 */

	public static List<AdDomain> getBannerAd() {

		List<AdDomain> adList = new ArrayList<AdDomain>();

		AdDomain adDomain = new AdDomain();

		adDomain.setId("108078");

		adDomain.setDate("3月4日");

		adDomain.setTitle("我和令计划仅仅是同姓");

		adDomain.setTopicFrom("阿宅");

		adDomain.setTopic("我想知道令狐安和令计划有什么关系？");

		adDomain.setImgUrl("http://g.hiphotos.baidu.com/image/w%3D310/sign=bb99d6add2c8a786be2a4c0f5708c9c7/d50735fae6cd7b8900d74cd40c2442a7d9330e29.jpg");

		adDomain.setAd(false);

		adList.add(adDomain);

		AdDomain adDomain2 = new AdDomain();

		adDomain2.setId("108078");

		adDomain2.setDate("3月5日");

		adDomain2.setTitle("我和令计划仅仅是同姓");

		adDomain2.setTopicFrom("小巫");

		adDomain2.setTopic("“我想知道令狐安和令计划有什么关系？”");

		adDomain2

				.setImgUrl("http://g.hiphotos.baidu.com/image/w%3D310/sign=7cbcd7da78f40ad115e4c1e2672e1151/eaf81a4c510fd9f9a1edb58b262dd42a2934a45e.jpg");

		adDomain2.setAd(false);

		adList.add(adDomain2);

		AdDomain adDomain3 = new AdDomain();

		adDomain3.setId("108078");

		adDomain3.setDate("3月6日");

		adDomain3.setTitle("我和令计划仅仅是同姓");

		adDomain3.setTopicFrom("旭东");

		adDomain3.setTopic("“我想知道令狐安和令计划有什么关系？”");

		adDomain3

				.setImgUrl("http://e.hiphotos.baidu.com/image/w%3D310/sign=392ce7f779899e51788e3c1572a6d990/8718367adab44aed22a58aeeb11c8701a08bfbd4.jpg");

		adDomain3.setAd(false);

		adList.add(adDomain3);

		AdDomain adDomain4 = new AdDomain();

		adDomain4.setId("108078");

		adDomain4.setDate("3月7日");

		adDomain4.setTitle("我和令计划仅仅是同姓");

		adDomain4.setTopicFrom("小软");

		adDomain4.setTopic("“我想知道令狐安和令计划有什么关系？”");

		adDomain4

				.setImgUrl("http://d.hiphotos.baidu.com/image/w%3D310/sign=54884c82b78f8c54e3d3c32e0a282dee/a686c9177f3e670932e4cf9338c79f3df9dc55f2.jpg");

		adDomain4.setAd(false);

		adList.add(adDomain4);

		AdDomain adDomain5 = new AdDomain();

		adDomain5.setId("108078");

		adDomain5.setDate("3月8日");

		adDomain5.setTitle("我和令计划仅仅是同姓");

		adDomain5.setTopicFrom("大熊");

		adDomain5.setTopic("“我想知道令狐安和令计划有什么关系？”");

		adDomain5

				.setImgUrl("http://e.hiphotos.baidu.com/image/w%3D310/sign=66270b4fe8c4b7453494b117fffd1e78/0bd162d9f2d3572c7dad11ba8913632762d0c30d.jpg");

		adDomain5.setAd(true); // 代表是广告

		adList.add(adDomain5);

		return adList;

	}

ViewPager逻辑处理

1. 填充数据（自己定义Adapter)

2. 设置页面切换监听事件

3. 在自己定义adapter中的instantiateItem方法设置ViewPager点击事件

这里我们的图片是从网上下载的，用到了universal-image-loader-1.8.6-with-sources.jar这个类库。能够实现异步载入图片。详细使用查看代码。

最后给出完整代码：

/BannerAutoScrollDemo/src/com/xiaowu/banner/demo/MainActivity.java

package com.xiaowu.banner.demo;

import java.io.File;

import java.util.ArrayList;

import java.util.List;

import java.util.concurrent.Executors;

import java.util.concurrent.ScheduledExecutorService;

import java.util.concurrent.TimeUnit;

import android.app.Activity;

import android.graphics.Bitmap;

import android.os.Bundle;

import android.os.Handler;

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.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.ImageView.ScaleType;

import android.widget.TextView;

import com.nostra13.universalimageloader.cache.disc.impl.UnlimitedDiscCache;

import com.nostra13.universalimageloader.cache.memory.impl.LruMemoryCache;

import com.nostra13.universalimageloader.core.DisplayImageOptions;

import com.nostra13.universalimageloader.core.ImageLoader;

import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;

import com.nostra13.universalimageloader.core.assist.ImageScaleType;

import com.nostra13.universalimageloader.core.assist.QueueProcessingType;

public class MainActivity extends Activity {

	public static String IMAGE_CACHE_PATH = "imageloader/Cache"; // 图片缓存路径

	private ViewPager adViewPager;

	private List<ImageView> imageViews;// 滑动的图片集合

	private List<View> dots; // 图片标题正文的那些点

	private List<View> dotList;

	private TextView tv_date;

	private TextView tv_title;

	private TextView tv_topic_from;

	private TextView tv_topic;

	private int currentItem = 0; // 当前图片的索引號

	// 定义的五个指示点

	private View dot0;

	private View dot1;

	private View dot2;

	private View dot3;

	private View dot4;

	// 定时任务

	private ScheduledExecutorService scheduledExecutorService;

	// 异步载入图片

	private ImageLoader mImageLoader;

	private DisplayImageOptions options;

	// 轮播banner的数据

	private List<AdDomain> adList;

	private Handler handler = new Handler() {

		public void handleMessage(android.os.Message msg) {

			adViewPager.setCurrentItem(currentItem);

		};

	};

	@Override

	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);

		// 使用ImageLoader之前初始化

		initImageLoader();

		// 获取图片载入实例

		mImageLoader = ImageLoader.getInstance();

		options = new DisplayImageOptions.Builder()

				.showStubImage(R.drawable.top_banner_android)

				.showImageForEmptyUri(R.drawable.top_banner_android)

				.showImageOnFail(R.drawable.top_banner_android)

				.cacheInMemory(true).cacheOnDisc(true)

				.bitmapConfig(Bitmap.Config.RGB_565)

				.imageScaleType(ImageScaleType.EXACTLY).build();

		initAdData();

		startAd();

	}

	/**

	 * 初始化ImageLoader

	 */

	private void initImageLoader() {

		File cacheDir = com.nostra13.universalimageloader.utils.StorageUtils

				.getOwnCacheDirectory(getApplicationContext(),

						IMAGE_CACHE_PATH);

		DisplayImageOptions defaultOptions = new DisplayImageOptions.Builder()

				.cacheInMemory(true).cacheOnDisc(true).build();

		ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(

				this).defaultDisplayImageOptions(defaultOptions)

				.memoryCache(new LruMemoryCache(12 * 1024 * 1024))

				.memoryCacheSize(12 * 1024 * 1024)

				.discCacheSize(32 * 1024 * 1024).discCacheFileCount(100)

				.discCache(new UnlimitedDiscCache(cacheDir))

				.threadPriority(Thread.NORM_PRIORITY - 2)

				.tasksProcessingOrder(QueueProcessingType.LIFO).build();

		ImageLoader.getInstance().init(config);

	}

	/**

	 * 初始化广告数据

	 */

	private void initAdData() {

		// 广告数据

		adList = getBannerAd();

		imageViews = new ArrayList<ImageView>();

		// 点

		dots = new ArrayList<View>();

		dotList = new ArrayList<View>();

		dot0 = findViewById(R.id.v_dot0);

		dot1 = findViewById(R.id.v_dot1);

		dot2 = findViewById(R.id.v_dot2);

		dot3 = findViewById(R.id.v_dot3);

		dot4 = findViewById(R.id.v_dot4);

		dots.add(dot0);

		dots.add(dot1);

		dots.add(dot2);

		dots.add(dot3);

		dots.add(dot4);

		tv_date = (TextView) findViewById(R.id.tv_date);

		tv_title = (TextView) findViewById(R.id.tv_title);

		tv_topic_from = (TextView) findViewById(R.id.tv_topic_from);

		tv_topic = (TextView) findViewById(R.id.tv_topic);

		adViewPager = (ViewPager) findViewById(R.id.vp);

		adViewPager.setAdapter(new MyAdapter());// 设置填充ViewPager页面的适配器

		// 设置一个监听器，当ViewPager中的页面改变时调用

		adViewPager.setOnPageChangeListener(new MyPageChangeListener());

		addDynamicView();

	}

	private void addDynamicView() {

		// 动态加入图片和以下指示的圆点

		// 初始化图片资源

		for (int i = 0; i < adList.size(); i++) {

			ImageView imageView = new ImageView(this);

			// 异步载入图片

			mImageLoader.displayImage(adList.get(i).getImgUrl(), imageView,

					options);

			imageView.setScaleType(ScaleType.CENTER_CROP);

			imageViews.add(imageView);

			dots.get(i).setVisibility(View.VISIBLE);

			dotList.add(dots.get(i));

		}

	}

	@Override

	protected void onResume() {

		super.onResume();

	}

	private void startAd() {

		scheduledExecutorService = Executors.newSingleThreadScheduledExecutor();

		// 当Activity显示出来后，每两秒切换一次图片显示

		scheduledExecutorService.scheduleAtFixedRate(new ScrollTask(), 1, 2,

				TimeUnit.SECONDS);

	}

	private class ScrollTask implements Runnable {

		@Override

		public void run() {

			synchronized (adViewPager) {

				currentItem = (currentItem + 1) % imageViews.size();

				handler.obtainMessage().sendToTarget();

			}

		}

	}

	@Override

	protected void onStop() {

		super.onStop();

		// 当Activity不可见的时候停止切换

		scheduledExecutorService.shutdown();

	}

	private class MyPageChangeListener implements OnPageChangeListener {

		private int oldPosition = 0;

		@Override

		public void onPageScrollStateChanged(int arg0) {

		}

		@Override

		public void onPageScrolled(int arg0, float arg1, int arg2) {

		}

		@Override

		public void onPageSelected(int position) {

			currentItem = position;

			AdDomain adDomain = adList.get(position);

			tv_title.setText(adDomain.getTitle()); // 设置标题

			tv_date.setText(adDomain.getDate());

			tv_topic_from.setText(adDomain.getTopicFrom());

			tv_topic.setText(adDomain.getTopic());

			dots.get(oldPosition).setBackgroundResource(R.drawable.dot_normal);

			dots.get(position).setBackgroundResource(R.drawable.dot_focused);

			oldPosition = position;

		}

	}

	private class MyAdapter extends PagerAdapter {

		@Override

		public int getCount() {

			return adList.size();

		}

		@Override

		public Object instantiateItem(ViewGroup container, int position) {

			ImageView iv = imageViews.get(position);

			((ViewPager) container).addView(iv);

			final AdDomain adDomain = adList.get(position);

			// 在这种方法里面设置图片的点击事件

			iv.setOnClickListener(new OnClickListener() {

				@Override

				public void onClick(View v) {

					// 处理跳转逻辑

				}

			});

			return iv;

		}

		@Override

		public void destroyItem(View arg0, int arg1, Object arg2) {

			((ViewPager) arg0).removeView((View) arg2);

		}

		@Override

		public boolean isViewFromObject(View arg0, Object arg1) {

			return arg0 == arg1;

		}

		@Override

		public void restoreState(Parcelable arg0, ClassLoader arg1) {

		}

		@Override

		public Parcelable saveState() {

			return null;

		}

		@Override

		public void startUpdate(View arg0) {

		}

		@Override

		public void finishUpdate(View arg0) {

		}

	}

	/**

	 * 轮播广播模拟数据

	 *

	 * @return

	 */

	public static List<AdDomain> getBannerAd() {

		List<AdDomain> adList = new ArrayList<AdDomain>();

		AdDomain adDomain = new AdDomain();

		adDomain.setId("108078");

		adDomain.setDate("3月4日");

		adDomain.setTitle("我和令计划仅仅是同姓");

		adDomain.setTopicFrom("阿宅");

		adDomain.setTopic("我想知道令狐安和令计划有什么关系？");

		adDomain.setImgUrl("http://g.hiphotos.baidu.com/image/w%3D310/sign=bb99d6add2c8a786be2a4c0f5708c9c7/d50735fae6cd7b8900d74cd40c2442a7d9330e29.jpg");

		adDomain.setAd(false);

		adList.add(adDomain);

		AdDomain adDomain2 = new AdDomain();

		adDomain2.setId("108078");

		adDomain2.setDate("3月5日");

		adDomain2.setTitle("我和令计划仅仅是同姓");

		adDomain2.setTopicFrom("小巫");

		adDomain2.setTopic("“我想知道令狐安和令计划有什么关系？”");

		adDomain2

				.setImgUrl("http://g.hiphotos.baidu.com/image/w%3D310/sign=7cbcd7da78f40ad115e4c1e2672e1151/eaf81a4c510fd9f9a1edb58b262dd42a2934a45e.jpg");

		adDomain2.setAd(false);

		adList.add(adDomain2);

		AdDomain adDomain3 = new AdDomain();

		adDomain3.setId("108078");

		adDomain3.setDate("3月6日");

		adDomain3.setTitle("我和令计划仅仅是同姓");

		adDomain3.setTopicFrom("旭东");

		adDomain3.setTopic("“我想知道令狐安和令计划有什么关系？”");

		adDomain3

				.setImgUrl("http://e.hiphotos.baidu.com/image/w%3D310/sign=392ce7f779899e51788e3c1572a6d990/8718367adab44aed22a58aeeb11c8701a08bfbd4.jpg");

		adDomain3.setAd(false);

		adList.add(adDomain3);

		AdDomain adDomain4 = new AdDomain();

		adDomain4.setId("108078");

		adDomain4.setDate("3月7日");

		adDomain4.setTitle("我和令计划仅仅是同姓");

		adDomain4.setTopicFrom("小软");

		adDomain4.setTopic("“我想知道令狐安和令计划有什么关系？”");

		adDomain4

				.setImgUrl("http://d.hiphotos.baidu.com/image/w%3D310/sign=54884c82b78f8c54e3d3c32e0a282dee/a686c9177f3e670932e4cf9338c79f3df9dc55f2.jpg");

		adDomain4.setAd(false);

		adList.add(adDomain4);

		AdDomain adDomain5 = new AdDomain();

		adDomain5.setId("108078");

		adDomain5.setDate("3月8日");

		adDomain5.setTitle("我和令计划仅仅是同姓");

		adDomain5.setTopicFrom("大熊");

		adDomain5.setTopic("“我想知道令狐安和令计划有什么关系？”");

		adDomain5

				.setImgUrl("http://e.hiphotos.baidu.com/image/w%3D310/sign=66270b4fe8c4b7453494b117fffd1e78/0bd162d9f2d3572c7dad11ba8913632762d0c30d.jpg");

		adDomain5.setAd(true); // 代表是广告

		adList.add(adDomain5);

		return adList;

	}

}

源代码下载：http://download.csdn.net/detail/wwj_748/8498749

转载请注明：IT_xiao小巫
博客地址：http://blog.csdn.net/wwj_748
移动开发狂热组：299402133

版权声明：本文博客原创文章，博客，未经同意，不得转载。

Android UI - 实现广告Banner旋转木马效果的更多相关文章

  1. Android 深入ViewPager补间动画,实现类京东商城首页广告Banner切换效果

    如有转载,请声明出处: 时之沙: http://blog.csdn.net/t12x3456 某天看到京东商城首页的滑动广告的Banner,在流动切换的时候有立体的动画效果,感觉很有意思,然后研究了下 ...

  2. JQuery——banner旋转木马效果

    博主在浏览网页时无意间发现了一种banner图的轮播方式--像旋转木马一样的轮播方式,博主感觉非常新颖独特,经过查阅资料,观看某课网教程总算搞了出来的,其原理主要利用了JQuery代码实现,好了不多说 ...

  3. Android UI 之WaterFall瀑布流效果

        所谓瀑布流效果,简单说就是宽度相同但是高度不同的一大堆图片,分成几列,然后像水流一样向下排列,并随着用户的上下滑动自动加载更多的图片内容.     语言描述比较抽象,具体效果看下面的截图:   ...

  4. Android 轮播图Banner切换图片的效果

    Android XBanner使用详解 2018年03月14日 08:19:59 AND_Devil 阅读数:910   版权声明:本文为博主原创文章,未经博主允许不得转载. https://www. ...

  5. [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

    http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...

  6. 巧用Drawable 实现Android UI 元素间距效果

    源文地址: 巧用Drawable 实现Android UI 元素间距效果 在大部分的移动UI或者Web UI都是基于网格概念而设计的.这种网格一般都是有一些对其的方块组成,然后它们组合成为一个块.使用 ...

  7. GitHub上受欢迎的Android UI Library

    GitHub上受欢迎的Android UI Library 内容 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayout 图标 下拉刷新 Vi ...

  8. Android UI相关开源项目库汇总

    最近做了一个Android UI相关开源项目库汇总,里面集合了OpenDigg 上的优质的Android开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个st ...

  9. 各种Android UI开源框架 开源库

    各种Android UI开源框架 开源库 转 https://blog.csdn.net/zhangdi_gdk2016/article/details/84643668 自己总结的Android开源 ...

随机推荐

  1. MFC模态对话框的消息循环

    MFC模态对话框的消息循环 单线程程序, 当主窗口响应函数中弹出模态对话框时,为什么主窗口响应函数可能照常工作? 当弹出模态对话框时,线程的消息循环无法返回,父窗口的事件本应没人处理,应该处于卡死状态 ...

  2. 跟我extjs5(38--单个模块的设计[6获得模块列表数据])

    跟我extjs5(38--单个模块的设计[6获得模块列表数据])         在程序的前一个表以及,据的执行过程. 在菜单中选择 "系统管理"--"模块分组" ...

  3. Maven POM入门

    Super POM(project object model) Maven内置了一个默认的POM(不在项目中,因此不可见),每一个project都会继承自这个默认的POM,因此叫Super POM.除 ...

  4. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  5. OCP-1Z0-051-题目解析-第29题

    29. Which two statements are true regarding constraints? (Choose two.)  A. A foreign key cannot cont ...

  6. ORA-00600: 内部错误代码, 参数: [kqlnrc_1]

    如以下的错误: Mon Mar 31 18:45:59 2014 Errors in file /oracle/app/oracle/diag/rdbms/zscims/zscims2/trace/z ...

  7. js实现页面重定位的几种方法

    参考地址:http://www.cnblogs.com/super-d2/archive/2011/10/01/2197004.html js实现页面重定向 在现行的网站应用中URL重定向的应用有很多 ...

  8. linux--shell script

    下面是最近学习shell script的一些知识点总结 ***博客园-邦邦酱好***   1.介绍shell是一个文字接口,让我们与系统沟通.shell script就是针对shell所写的脚本.它就 ...

  9. malloc一次性最大能申请多大内存空间

    受用户态内存地址空间的限制.64 位系统下分配几个 T 不成问题. 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:zz matrix链接:http://www.zhihu. ...

  10. HUNNU11354:Is the Name of This Problem

    http://acm.hunnu.edu.cn/online/?action=problem&type=show&id=11354&courseid=0 Problem des ...