Несколько полезных библиотек для Android и IOS разработки
Несколько полезных UI-библиотек для разработки на Android
Мне частенько нужно было разрабатывать приложения как для платформы IOS, так и для Android. Во время этих процессов я использовал некоторые библиотеки, которые я считаю очень полезными. Сегодня я хочу поделиться ими с вами!
1 — Picasso
Название этой библиотеки очень совпадает с её функционалом. Она используется для рисования изображений с помощью загрузки и кэширования.
Внедрение
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, вы можете легко создать слайдер. В нём присутствует много различных вариантов анимаций.
Внедрение
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
Github: https://github.com/smarteist/Android-Image-Slider
3 — PinView
Эта библиотека предоставляет виджет для ввода PIN-кода / OTP / пароля. Это было действительно полезно для моей системы проверки SMS.
Внедрение
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
Github: https://github.com/ChaosLeung/PinView
4 — SweetAlert
Думаю, все вы знаете, какими некрасивыми могут быть всплывающие окна, сообщающие об ошибке! Вы можете сделать их более красивыми с помощью этой библиотеки.
Внедрение
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();
Сообщение с пользовательским представлением
Github: https://github.com/F0RIS/sweet-alert-dialog
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
Github: https://facebook.github.io/shimmer-android/
Заключение
В этой статье я предпочел рассказать о UI-библиотеках, а не о серверной части, потому что пользователи мобильных приложений больше заботятся о дизайне. Иногда я чувствовал, что иметь дело с дизайном и пользовательским интерфейсом для меня сложнее, чем с серверной частью. Возможно, я упомяну о модифицированной библиотеке для серверной разработки в одной из следующих статей!