Несколько полезных библиотек для Android и IOS разработки

Несколько полезных библиотек для Android и IOS разработки

Мне частенько нужно было разрабатывать приложения как для платформы IOS, так и для Android. Во время этих процессов я использовал некоторые библиотеки, которые я считаю очень полезными. Сегодня я хочу поделиться ими с вами!

1 — Picasso

Название этой библиотеки очень совпадает с её функционалом. Она используется для рисования изображений с помощью загрузки и кэширования.

Несколько полезных библиотек для Android и IOS разработки

Внедрение

implementation 'com.squareup.picasso:picasso:2.8'

Кстати, вы должны разрешить подключение к Интернету с помощью приведённого ниже кода в AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Код (на Java)

// These are some elements String myUrl = "YOUR URL HERE"; ImageView profilePhoto = findViewById(R.id.profilePhoto); // Picasso Usage Picasso.get().load(myUrl).into(profilePhoto); // Transforms Picasso.get().load(myUrl).resize(50,50).centerCrop().into(profilePhoto); // Placeholder Picasso.get().load(url).placeholder(R.drawable.placeholder).error(R.drawable.placeholder_error).into(profilePhoto);

Это простая и необязательная библиотека, спасибо!

Github: https://github.com/square/picasso

2 — Auto Image Slider

С помощью библиотеки Auto Image Slider, вы можете легко создать слайдер. В нём присутствует много различных вариантов анимаций.

Несколько полезных библиотек для Android и IOS разработки

Внедрение

implementation 'com.github.smarteist:autoimageslider:1.4.0'

Код (на Java)

<androidx.cardview.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" app:cardBackgroundColor="@color/white" app:cardCornerRadius="6dp" app:cardElevation="20dp"> <com.smarteist.autoimageslider.SliderView android:id="@+id/imageSlider" android:layout_width="match_parent" android:layout_height="300dp" app:sliderAnimationDuration="1000" app:sliderAutoCycleDirection="back_and_forth" app:sliderAutoCycleEnabled="true" app:sliderIndicatorAnimationDuration="600" app:sliderIndicatorGravity="bottom|center_horizontal" app:sliderIndicatorOrientation="horizontal" app:sliderIndicatorPadding="3dp" app:sliderIndicatorRadius="2dp" app:sliderIndicatorSelectedColor="#5A5A5A" app:sliderIndicatorUnselectedColor="#FFFFFF" app:sliderScrollTimeInSec="1" app:sliderStartAutoCycle="true"/> </androidx.cardview.widget.CardView>

Activity.xml (Вы можете поместить слайдер в cardview)

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.slider_item_layout, 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() { 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; } } }

SliderAdapterExample.java

SliderView sliderView = findViewById(R.id.imageSlider); SliderAdapterExample adapter = new SliderAdapterExample(this); // Manually item add SliderItem sliderItem1 = new SliderItem(); sliderItem1.setImageUrl("https://www.site.com/a.jpg"); adapter.addItem(sliderItem1); sliderView.setSliderAdapter(adapter); sliderView.setIndicatorAnimation(IndicatorAnimationType.WORM); //set indicator animation by using SliderLayout.IndicatorAnimations. :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(3); sliderView.setAutoCycle(true); sliderView.startAutoCycle(); sliderView.setOnIndicatorClickListener(new DrawController.ClickListener() { @Override public void onIndicatorClicked(int position) { System.out.println("Clicked! Position=" + sliderView.getCurrentPagePosition())); } });

MainActivity.java

3 — PinView

Эта библиотека предоставляет виджет для ввода PIN-кода / OTP / пароля. Это было действительно полезно для моей системы проверки SMS.

Несколько полезных библиотек для Android и IOS разработки

Внедрение

repositories { maven { mavenCentral() } } dependencies { implementation 'io.github.chaosleung:pinview:1.4.4' }

Чтобы данная библиотека корректно работала, вы должны добавить MavenCentral в файл settings.gradle.

Код (на Java)

<com.chaos.view.PinView android:id="@+id/firstPinView" style="@style/PinWidget.PinView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:cursorVisible="true" android:fontFamily="@font/robotobold" android:hint="0000" android:inputType="number" android:textColor="@color/black" android:textSize="48sp" app:cursorColor="@color/black" app:cursorWidth="2dp" app:hideLineWhenFilled="true" app:itemCount="4" app:itemHeight="70dp" app:itemRadius="30dp" app:itemSpacing="10dp" app:itemWidth="70dp" app:lineColor="#4D6C6C6C" app:lineWidth="2dp" app:viewType="rectangle" />

Activity.xml

4 — SweetAlert

Думаю, все вы знаете, какими некрасивыми могут быть всплывающие окна, сообщающие об ошибке! Вы можете сделать их более красивыми с помощью этой библиотеки.

Несколько полезных библиотек для Android и IOS разработки

Внедрение

repositories { mavenCentral() } dependencies { implementation 'com.github.f0ris.sweetalert:library:1.6.2' }

Код (на Java)

new SweetAlertDialog(this) .setTitleText("Here's a message!") .show();

Основное сообщение

<> new SweetAlertDialog(this) .setTitleText("Here's a message!") .setContentText("It's pretty, isn't it?") .show();

Базовое сообщение с текстовым содержанием

new SweetAlertDialog(this, SweetAlertDialog.ERROR_TYPE) .setTitleText("Error!") .setContentText("Bla bla") .show();

Сообщение об ошибке

new SweetAlertDialog(this, SweetAlertDialog.WARNING_TYPE) .setTitleText("Are you sure?") .setContentText("Won't be able to recover this file!") .setConfirmText("Yes! delete it!") .show();

Предупреждающее сообщение

new SweetAlertDialog(this, SweetAlertDialog.SUCCESS_TYPE) .setTitleText("Good job!") .setContentText("You clicked the button!") .show();

Сообщение об успехе

final EditText editText = new EditText(this); new SweetAlertDialog(this, SweetAlertDialog.NORMAL_TYPE) .setTitleText("Custom view") .setConfirmText("Ok") .setCustomView(editText) .show();

Сообщение с пользовательским представлением

5 — Shimmer

Сейчас вы можете видеть эту библиотеку повсюду! Библиотека, создающая анимированные пространства, пока на страницах не прогрузится контент. Серые квадраты занимают место загрузки фотографий, серые прямоугольники заменяют тексты. Вспоминаете?

Внедрение (первый способ)

implementation 'com.facebook.shimmer:shimmer:0.5.0'
<com.facebook.shimmer.ShimmerFrameLayout android:id="@+id/shimmer_view_container" android:layout_width="wrap_content" android:layout_height="wrap_content" > ...(your complex view here)... </com.facebook.shimmer.ShimmerFrameLayout>
ShimmerFrameLayout container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container); container.startShimmer();

Это была первая техника использования. Преимуществом этого способа является простота. Позвольте мне показать вам второй способ.

Внедрение (второй способ)

Второй способ заключается в том, что у вас есть два XML-файла, первый из которых используется для экрана загрузки, а второй - для экрана после загрузки (отображение контента). Вы можете выбрать способ в зависимости от масштаба вашего проекта.

<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/profilePhoto" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="20dp" android:layout_marginTop="15dp" android:background="#FFCCCCCC"/> <TextView android:id="@+id/profileFullname" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_marginStart="15dp" android:layout_marginTop="15dp" android:background="#FFCCCCCC" android:textSize="20dp"/> </LinearLayout>

placeholder.xml

<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/profilePhoto" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="20dp" android:layout_marginTop="15dp" android:background="@drawable/myPhoto"/> <TextView android:id="@+id/profileFullname" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_marginStart="15dp" android:layout_marginTop="15dp" android:text="Turgay Ceylan" android:textSize="20dp"/> </LinearLayout>

real.xml

<com.facebook.shimmer.ShimmerFrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/profileDetailShimmerLayout"> <include layout="@layout/placeholder"/> </com.facebook.shimmer.ShimmerFrameLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/realLayout"> <include layout="@layout/real"/> </LinearLayout>

activity.xml

ShimmerFrameLayout shimmerFrameLayout = findViewById(R.id.profileDetailShimmerLayout); LinearLayout dataLayout = findViewById(R.id.realLayout); dataLayout.setVisibility(View.INVISIBLE); shimmerFrameLayout.startShimmer(); new Handler().postDelayed(() -> { dataLayout.setVisibility(View.VISIBLE); shimmerFrameLayout.stopShimmer(); shimmerFrameLayout.setVisibility(View.INVISIBLE); },3000);

MainActivity.java

Заключение

В этой статье я предпочел рассказать о UI-библиотеках, а не о серверной части, потому что пользователи мобильных приложений больше заботятся о дизайне. Иногда я чувствовал, что иметь дело с дизайном и пользовательским интерфейсом для меня сложнее, чем с серверной частью. Возможно, я упомяну о модифицированной библиотеке для серверной разработки в одной из следующих статей!

Статья была взята из этого источника:

11
Начать дискуссию