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

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

Мне частенько нужно было разрабатывать приложения как для платформы 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

Github: https://github.com/smarteist/Android-Image-Slider

3 — PinView

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

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

Внедрение

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

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

Несколько полезных библиотек для 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();

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

Github: https://github.com/F0RIS/sweet-alert-dialog

5 — Shimmer

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

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

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

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

+1
1
+1
3
+1
0
+1
0
+1
0

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *