Skip to content
代码家 edited this page Jun 9, 2014 · 4 revisions

Slider view is the view that show in SliderLayout. There are two preset slider view.

DefaultSliderView just simply show an image.

TextSliderView show not only an image but also a description text.

It's very very easy to make your own custom Slider View.

###Step1

Define a layout xml, which represent the layout you want to show in SliderLayout.

For example:

<?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">
    <ImageView
        android:id="@+id/daimajia_slider_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ProgressBar 
        android:id="@+id/loading_bar"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:id="@+id/description_layout"
        android:layout_alignParentBottom="true"
        android:minHeight="30dp"
        android:background="#77000000"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:gravity="center_vertical"
        android:paddingLeft="10dp"
        android:layout_height="wrap_content">
            <TextView
                android:id="@+id/description"
                android:textColor="#ffffff"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
</RelativeLayout>

Tip: if you want to have a ProgressBar, then add a ProgressBar and name it loading_bar, you don't need to manipulate it, the library will do it.

    <ProgressBar 
        android:id="@+id/loading_bar"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

###Step2

Create a class which extends from BaseSliderView, and implement getView() method. In getView() method, inflate the layout file, and fill the arguments into it.

Tips: you can get arguments via getTag() or getBundle().

DO NOT forget to call loadImage(ImageView target) and bindClickEvent(View target) at last.

if you don't call loadImage(ImageView target) then, the slider will not load the image into the target image view.

if you don't call bindClickEvent(View target) then, the slider will not get click event when user click the view.

public class TextSliderView extends BaseSliderView{
    public TextSliderView(Context context) {
        super(context);
    }

    @Override
    public View getView() {
        View v = LayoutInflater.from(getContext()).inflate(R.layout.render_type_text,null);
        ImageView target = (ImageView)v.findViewById(R.id.daimajia_slider_image);
        TextView description = (TextView)v.findViewById(R.id.description);
        description.setText(getDescription());
        loadImage(target);
        bindClickEvent(v);
        return v;
    }
}

###Step3

Start using your creative work.

TextSliderView demoSlider = new TextSliderView(this);
demoSlider.description("Game of Thrones")
          .image("http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg")
          .setOnClickListener(this);
slider.addSlider(demoSlider);

Congratulations! You can custom your own slider view. Pretty easy right? 😃

Clone this wiki locally