นี่เป็นตัวเลื่อนภาพที่น่าทึ่งสำหรับ Android
คุณสามารถโหลดภาพด้วยเค้าโครงที่กำหนดเองของคุณได้อย่างง่ายดายและมีภาพเคลื่อนไหวที่น่าทึ่งมากมายที่คุณสามารถเลือกได้
implementation ' com.github.smarteist:autoimageslider:1.4.0 '
หากคุณใช้ไลบรารี AppCompat ใช้ห้องนี้ แต่โปรดย้ายไปยัง AndroidX โดยเร็วที่สุด
implementation ' com.github.smarteist:autoimageslider:1.4.0-appcompat '
ก่อนอื่นใส่มุมมองตัวเลื่อนในเลย์เอาต์ของคุณ XML:
< com .smarteist.autoimageslider.SliderView
android : id = " @+id/imageSlider "
android : layout_width = " match_parent "
android : layout_height = " 300dp "
app : sliderAnimationDuration = " 600 "
app : sliderAutoCycleDirection = " back_and_forth "
app : sliderAutoCycleEnabled = " true "
app : sliderIndicatorAnimationDuration = " 600 "
app : sliderIndicatorGravity = " center_horizontal|bottom "
app : sliderIndicatorMargin = " 15dp "
app : sliderIndicatorOrientation = " horizontal "
app : sliderIndicatorPadding = " 3dp "
app : sliderIndicatorRadius = " 2dp "
app : sliderIndicatorSelectedColor = " #5A5A5A "
app : sliderIndicatorUnselectedColor = " #FFF "
app : sliderScrollTimeInSec = " 1 "
app : sliderStartAutoCycle = " true " />
หรือคุณสามารถวางไว้ใน CardView เพื่อดูสวยงามมากขึ้น:
< androidx .cardview.widget.CardView
app : cardCornerRadius = " 6dp "
android : layout_margin = " 16dp "
android : layout_width = " match_parent "
android : layout_height = " wrap_content " >
< com .smarteist.autoimageslider.SliderView
android : id = " @+id/imageSlider "
android : layout_width = " match_parent "
android : layout_height = " 300dp "
app : sliderAnimationDuration = " 600 "
app : sliderAutoCycleDirection = " back_and_forth "
app : sliderAutoCycleEnabled = " true "
app : sliderIndicatorAnimationDuration = " 600 "
app : sliderIndicatorGravity = " center_horizontal|bottom "
app : sliderIndicatorMargin = " 15dp "
app : sliderIndicatorOrientation = " horizontal "
app : sliderIndicatorPadding = " 3dp "
app : sliderIndicatorRadius = " 2dp "
app : sliderIndicatorSelectedColor = " #5A5A5A "
app : sliderIndicatorUnselectedColor = " #FFF "
app : sliderScrollTimeInSec = " 1 "
app : sliderStartAutoCycle = " true " />
</ androidx .cardview.widget.CardView>
เวอร์ชันใหม่ต้องใช้อะแดปเตอร์ตัวเลื่อนบวกเลย์เอาต์ที่กำหนดเองของคุณสำหรับรายการแถบเลื่อนแม้ว่ามันจะคล้ายกับ Recyclerview & RecyclerAdapter และมันก็คุ้นเคยและใช้งานง่ายที่จะใช้อะแดปเตอร์นี้ ... นี่คือตัวอย่างสำหรับการใช้อะแดปเตอร์:
public class SliderAdapterExample extends
SliderViewAdapter < SliderAdapterExample . SliderAdapterVH > {
private Context context ;
private List < SliderItem > mSliderItems = new ArrayList <>();
public SliderAdapterExample ( Context context ) {
this . context = context ;
}
public void renewItems ( List < SliderItem > sliderItems ) {
this . mSliderItems = sliderItems ;
notifyDataSetChanged ();
}
public void deleteItem ( int position ) {
this . mSliderItems . remove ( position );
notifyDataSetChanged ();
}
public void addItem ( SliderItem sliderItem ) {
this . mSliderItems . add ( sliderItem );
notifyDataSetChanged ();
}
@ Override
public SliderAdapterVH onCreateViewHolder ( ViewGroup parent ) {
View inflate = LayoutInflater . from ( parent . getContext ()). inflate ( R . layout . image_slider_layout_item , null );
return new SliderAdapterVH ( inflate );
}
@ Override
public void onBindViewHolder ( SliderAdapterVH viewHolder , final int position ) {
SliderItem sliderItem = mSliderItems . get ( position );
viewHolder . textViewDescription . setText ( sliderItem . getDescription ());
viewHolder . textViewDescription . setTextSize ( 16 );
viewHolder . textViewDescription . setTextColor ( Color . WHITE );
Glide . with ( viewHolder . itemView )
. load ( sliderItem . getImageUrl ())
. fitCenter ()
. into ( viewHolder . imageViewBackground );
viewHolder . itemView . setOnClickListener ( new View . OnClickListener () {
@ Override
public void onClick ( View v ) {
Toast . makeText ( context , "This is item in position " + position , Toast . LENGTH_SHORT ). show ();
}
});
}
@ Override
public int getCount () {
//slider view count could be dynamic size
return mSliderItems . size ();
}
class SliderAdapterVH extends SliderViewAdapter . ViewHolder {
View itemView ;
ImageView imageViewBackground ;
ImageView imageGifContainer ;
TextView textViewDescription ;
public SliderAdapterVH ( View itemView ) {
super ( itemView );
imageViewBackground = itemView . findViewById ( R . id . iv_auto_image_slider );
imageGifContainer = itemView . findViewById ( R . id . iv_gif_container );
textViewDescription = itemView . findViewById ( R . id . tv_auto_image_slider );
this . itemView = itemView ;
}
}
}
คุณสามารถสร้างเค้าโครงของคุณเองสำหรับมุมมองตัวเลื่อน
นี่คือตัวอย่างสำหรับการใช้อะแดปเตอร์:
<? xml version = " 1.0 " encoding = " utf-8 " ?>
< FrameLayout xmlns : android = " http://schemas.android.com/apk/res/android "
xmlns : tools = " http://schemas.android.com/tools "
android : layout_width = " match_parent "
android : layout_height = " match_parent "
android : orientation = " vertical " >
< ImageView
android : id = " @+id/iv_auto_image_slider "
android : layout_width = " match_parent "
android : layout_height = " match_parent "
android : scaleType = " fitXY " />
< ImageView
android : id = " @+id/iv_gif_container "
android : layout_width = " 80dp "
android : layout_height = " 80dp "
android : layout_gravity = " bottom|start "
android : layout_margin = " 50dp " />
< FrameLayout
android : id = " @+id/fl_shadow_container "
android : background = " @drawable/bg_overlay "
android : layout_width = " match_parent "
android : layout_height = " wrap_content "
android : layout_gravity = " bottom " >
< TextView
android : id = " @+id/tv_auto_image_slider "
android : layout_width = " match_parent "
android : layout_height = " wrap_content "
android : layout_marginTop = " 8dp "
android : layout_marginBottom = " 25dp "
android : padding = " 6dp "
android : textColor = " #FFF "
android : textSize = " 18sp " />
</ FrameLayout >
</ FrameLayout >
หลังจากอินสแตนซ์ของ sliderview (ภายในกิจกรรมหรือส่วนที่มี findViewById | bindView ... ) ตั้งค่าอะแดปเตอร์เป็นตัวเลื่อน
SliderView sliderView = findViewById ( R . id . imageSlider );
sliderView . setSliderAdapter ( new SliderAdapterExample ( context ));
คุณสามารถเรียกวิธีนี้ได้หากคุณต้องการเริ่มพลิกโดยอัตโนมัติและคุณสามารถตั้งค่าภาพเคลื่อนไหวตัวเลื่อน:
sliderView . setIndicatorAnimation ( IndicatorAnimationType . WORM );
sliderView . setSliderTransformAnimation ( SliderAnimations . SIMPLETRANSFORMATION );
sliderView . startAutoCycle ();
นี่คือตัวอย่างที่สมจริงและสมบูรณ์ยิ่งขึ้น:
@ Override
protected void onCreate ( Bundle savedInstanceState ) {
super . onCreate ( savedInstanceState );
setContentView ( R . layout . activity_main );
SliderView sliderView = findViewById ( R . id . imageSlider );
SliderAdapterExample adapter = new SliderAdapterExample ( this );
sliderView . setSliderAdapter ( adapter );
sliderView . setIndicatorAnimation ( IndicatorAnimationType . WORM ); //set indicator animation by using IndicatorAnimationType. :WORM or THIN_WORM or COLOR or DROP or FILL or NONE or SCALE or SCALE_DOWN or SLIDE and SWAP!!
sliderView . setSliderTransformAnimation ( SliderAnimations . SIMPLETRANSFORMATION );
sliderView . setAutoCycleDirection ( SliderView . AUTO_CYCLE_DIRECTION_BACK_AND_FORTH );
sliderView . setIndicatorSelectedColor ( Color . WHITE );
sliderView . setIndicatorUnselectedColor ( Color . GRAY );
sliderView . setScrollTimeInSec ( 4 ); //set scroll delay in seconds :
sliderView . startAutoCycle ();
}
ข้อเสนอแนะและคำขอดึงยินดีต้อนรับเสมอ ขอขอบคุณเป็นพิเศษ [Roman Danylyk] (https://github.com/romandanylyk) สำหรับตัวบ่งชี้ที่ดี!
ลิขสิทธิ์ [2019] [Ali Hosseini]
ได้รับใบอนุญาตภายใต้ใบอนุญาต Apache เวอร์ชัน 2.0; คุณไม่สามารถใช้ไฟล์นี้ยกเว้นตามใบอนุญาต คุณอาจได้รับสำเนาใบอนุญาตที่
http://www.apache.org/licenses/LICENSE-2.0
เว้นแต่ว่ากฎหมายที่บังคับใช้หรือตกลงเป็นลายลักษณ์อักษรซอฟต์แวร์ที่แจกจ่ายภายใต้ใบอนุญาตจะถูกแจกจ่ายตาม "ตามพื้นฐาน" โดยไม่มีการรับประกันหรือเงื่อนไขใด ๆ ไม่ว่าจะโดยชัดแจ้งหรือโดยนัย ดูใบอนุญาตสำหรับภาษาเฉพาะที่ควบคุมการอนุญาตและข้อ จำกัด ภายใต้ใบอนุญาต