-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Slider view
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? 😃
You are welcome to contribute and share your amazing indicator, transformer or slider child view animation design. 😄