一.概述
对于一个联网的Android应用, 首页广告无限轮播基本已经成为标配了.
那么它是怎么实现的呢?
有几种实现方式呢?
二.无限轮播的实现
1.最常规的手段是用 ViewPager来实现
2.比较原始的手段是: Gallery 画廊来实现
3.最简单的实现手段是:Android image slider第三方库
下面由简到难依次实现
第三方库Android image slider
github:/daimajia/AndroidImageSlider/
只看图片就发现,非常绚丽, 有很多轮播方式可以选择,并且指示器图标也有很多选择方式, DIY 非常自由化.
步骤一:如果用AS开发需引入下面的库:
dependencies {compile "com.android.support:support-v4:+"compile 'com.squareup.picasso:picasso:2.3.2'compile 'com.nineoldandroids:library:2.4.0'compile 'com.daimajia.slider:library:1.1.5@aar'}
步骤二:添加权限:
<!-- if you want to load images from the internet --><uses-permission android:name="android.permission.INTERNET" /> <!-- if you want to load images from a file OR from the internet --><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
步骤三: xml 的写法
Add the Slider to your layout:<com.daimajia.slider.library.SliderLayoutandroid:id="@+id/slider"android:layout_width="match_parent"android:layout_height="200dp"/>There are some default indicators. If you want to use a provided indicator:<com.daimajia.slider.library.Indicators.PagerIndicatorandroid:id="@+id/custom_indicator"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"/>
最后奉上代码:
package com.daimajia.slider.demo;import android.content.Intent;import .Uri;import android.os.Bundle;import android.support.v7.app.ActionBarActivity;import android.util.Log;import android.view.Menu;import android.view.MenuInflater;import android.view.MenuItem;import android.view.View;import android.widget.AdapterView;import android.widget.ListView;import android.widget.TextView;import android.widget.Toast;import com.daimajia.slider.library.Animations.DescriptionAnimation;import com.daimajia.slider.library.Indicators.PagerIndicator;import com.daimajia.slider.library.SliderLayout;import com.daimajia.slider.library.SliderTypes.BaseSliderView;import com.daimajia.slider.library.SliderTypes.TextSliderView;import com.daimajia.slider.library.Tricks.ViewPagerEx;import java.util.HashMap;public class MainActivity extends ActionBarActivity implements BaseSliderView.OnSliderClickListener, ViewPagerEx.OnPageChangeListener{private SliderLayout mDemoSlider;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mDemoSlider = (SliderLayout)findViewById(R.id.slider);HashMap<String,String> url_maps = new HashMap<String, String>();url_maps.put("Hannibal", "/wp-content/uploads//12/hannibal-season-2-release-date.jpg");url_maps.put("Big Bang Theory", "/100/hdclearart-10.png");url_maps.put("House of Cards", "/images/3093/2043093.jpg");url_maps.put("Game of Thrones", "/data/images/full/19640/game-of-thrones-season-4-jpg.jpg");HashMap<String,Integer> file_maps = new HashMap<String, Integer>();file_maps.put("Hannibal",R.drawable.hannibal);file_maps.put("Big Bang Theory",R.drawable.bigbang);file_maps.put("House of Cards",R.drawable.house);file_maps.put("Game of Thrones", R.drawable.game_of_thrones);for(String name : file_maps.keySet()){TextSliderView textSliderView = new TextSliderView(this);// initialize a SliderLayout textSliderView.description(name).image(file_maps.get(name)).setScaleType(BaseSliderView.ScaleType.Fit).setOnSliderClickListener(this);//add your extra informationtextSliderView.bundle(new Bundle());textSliderView.getBundle().putString("extra",name);mDemoSlider.addSlider(textSliderView);}mDemoSlider.setPresetTransformer(SliderLayout.Transformer.Accordion);mDemoSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);mDemoSlider.setCustomAnimation(new DescriptionAnimation());mDemoSlider.setDuration(4000);mDemoSlider.addOnPageChangeListener(this);ListView l = (ListView)findViewById(R.id.transformers);l.setAdapter(new TransformerAdapter(this));l.setOnItemClickListener(new AdapterView.OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {mDemoSlider.setPresetTransformer(((TextView) view).getText().toString());Toast.makeText(MainActivity.this, ((TextView) view).getText().toString(), Toast.LENGTH_SHORT).show();}});}@Overrideprotected void onStop() {// To prevent a memory leak on rotation, make sure to call stopAutoCycle() on the slider before activity or fragment is destroyed mDemoSlider.stopAutoCycle();super.onStop();}@Overridepublic void onSliderClick(BaseSliderView slider) {Toast.makeText(this,slider.getBundle().get("extra") + "",Toast.LENGTH_SHORT).show();}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {MenuInflater menuInflater = getMenuInflater();menuInflater.inflate(R.menu.main,menu);return super.onCreateOptionsMenu(menu);}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {switch (item.getItemId()){case R.id.action_custom_indicator:mDemoSlider.setCustomIndicator((PagerIndicator) findViewById(R.id.custom_indicator));break;case R.id.action_custom_child_animation:mDemoSlider.setCustomAnimation(new ChildAnimationExample());break;case R.id.action_restore_default:mDemoSlider.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);mDemoSlider.setCustomAnimation(new DescriptionAnimation());break;case R.id.action_github:Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("/daimajia/AndroidImageSlider"));startActivity(browserIntent);break;}return super.onOptionsItemSelected(item);}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {Log.d("Slider Demo", "Page Changed: " + position);}@Overridepublic void onPageScrollStateChanged(int state) {}}
注意一点: 如果 图片不带标题, 可以使用DefaultSliderView , 如果图片有标题 就用TextSliderView
分割线-------------------------------------------------------------------------------------------------------
方式2: 使用Gallery 画廊来实现图片无限轮播
