نوشته‌ها

چگونه یک اسلایدر به اکتیویتی اضافه کنیم؟

چگونه یک اسلایدر به اکتیویتی اضافه کنیم؟

ابتدا کتابخانه‌های مورد نیاز برای نوشتم اسلایدر را به اپلیکیشن اضافه می‌کنیم:

تو فایل gradle کتابخونه‌ها رو به ترتیب یر اضافه می‌کنیم:

compile “com.android.support:support-v4:+”
compile ‘com.squareup.picasso:picasso:2.3.2’
compile ‘com.nineoldandroids:library:2.4.0’
compile ‘com.daimajia.slider:library:1.1.5@aar’

با اضافه کردن این کتابخونه‌ها اندروید استودیو نیاز به دانلود کتابخونه‌هایی داره که تو sdk  وجود نداره.پس فراموش نکنید حتما فیلتر شکنتون رو اجرا کنید.

 

بعد از اضافه کردن کتابخونه ها باید permission  های مورد نیاز را در فایل AndroidManifest.xml تعریف کنید:

 

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

 

حالا نوبت به این میرسه که تو صفحه اصلی که میخواهیم اسلایدر داشته باشیم کدهامونو بنویسیم:

<com.daimajia.slider.library.SliderLayout
android:id=”@+id/slider”
android:layout_width=”match_parent”
android:layout_height=”200dp” />

 

و در MainActivity.java   ؛ SliderLayout  را که در فایل Layout اضافه کرده بودیم تعریف می‌کنیم:

SliderLayout sliderShow = (SliderLayout) findViewById(R.id.slider);
TextSliderView textSliderView = new TextSliderView(this);

 

 

تو کد بالا ابتدا SliderLyout و TextSliderView را تعریف می‌کنیم و شرح تصویر و خود تصویر را بهش اضافه می‌کنیم:

textSliderView
.description(“Game of Thrones”)
.image(“http://images.boomsbeat.com/data/images/full/19640/game-of-thrones-season-4-jpg.jpg”);

sliderShow.addSlider(textSliderView);

حالا کافیه یه آرایه تعریف کنیم و آدرس تصاویر و نام تصویر را داخل آرایه بریزیم و با یم حلقه طبق مثال بایل به SliderView ‌ی که تعریف کردیم اضافه کنیم. کد کامل را براتون میزارم:

 


import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.daimajia.slider.library.SliderLayout;
import com.daimajia.slider.library.SliderTypes.BaseSliderView;
import com.daimajia.slider.library.SliderTypes.TextSliderView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements BaseSliderView.OnSliderClickListener{
ArrayList<String> urlPics;
ArrayList<String> names;
@Override
protected void onCreate(Bundle savedInstanceState) {
urlPics = new ArrayList<>();
names = new ArrayList<>();
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SliderLayout sliderShow = (SliderLayout) findViewById(R.id.slider);
urlPics.add(“http://webenik.com/wp-content/uploads/2017/11/android1kjh.jpg”);
urlPics.add(“http://webenik.com/wp-content/uploads/2017/11/Programming-for-Kids-e1465336734364.jpg”);
urlPics.add(“http://webenik.com/wp-content/uploads/2017/12/51ea53b6f14e2a5ea05d98834444.jpg”);
urlPics.add(“http://webenik.com/wp-content/uploads/2017/11/programming-mistakes.jpg”);

names.add(“android”);
names.add(“Kids”);
names.add(“design”);
names.add(“pack”);

for(int i =0  ;i<urlPics.size();i++){
TextSliderView textSliderView = new TextSliderView(this);
textSliderView.image(urlPics.get(i))
.setScaleType(BaseSliderView.ScaleType.Fit)
.setOnSliderClickListener(this);
textSliderView.bundle(new Bundle());
textSliderView.getBundle()
.putString(“extra”,names.get(i));
sliderShow.addSlider(textSliderView);
}

}

@Override
public void onSliderClick(BaseSliderView slider) {

}
}

 

ایجاد صفحه اسپلش (Splash Screen)

چگونه در اندروید صفحه اسپلش (Splash Screen) بسازیم؟

 

 

همینطور که تو اپلیکیشن‌های مختلف دید اکثرشون Splash Screen دارن. منم تصمیم گرفتم آموزش ایجاد Splash Screen  رو براتون بزارم.امیدوارم به کارتون بیاد.

همینجور که تو آموزشهای قبلی دیدید من سعی می‌کنم از کوتاهترین مسیر برم جلو و از زیاده‌گویی پرهیز کنم. که هم زودتر به نتیجه برسیم و هم از اتلاف وقت جلوگیری بشه.

ابتدا یه اکتیویتی با هر اسمی که استاندارد نام‌گذاری خودتون تو پروژه‌تون دارید ایجاد میکینم.من اینجا اسمشو میزارم ActivitySpl.

 

درون Acticity_spl.xml  ؛ یک ImageView  ایجاد می‌کنیم و تنظمیات زیر را اضافه می‌کینم.

فقط قبل از هر کاری لوگو خودتونو درست کنید و سایزشو برای اکیتیویتون تنظیم کنید.

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:id=”@+id/activity_spl”
android:orientation=”vertical”
android:background=”#ffffff”
android:gravity=”center”

android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”rena.myapplication.ActivitySpl”>
<ImageView
android:layout_width=”wrap_content”
android:src=”@drawable/lgogforlearn”
android:layout_height=”wrap_content” />
</LinearLayout>

اگه به کد نگاه کنید متوجه میشید که پس زمینه رو سفید گذاشتم و تصویر لوگو هم اسمشو تو قسمت src  ست کردم.

قدم بعدی اینه که یه Style جدید ایجاد کنیم تا به ProgressBar مون تخصیص بدیم.

اول فایل colors.xml را باز میکینیم و یه colorAcent  جدید ایجاد می‌کنیم:

<color name=”colorSplAccent”>#a2fc43</color>

 

بعد تو فایل AndroidManifest.xml تم اکتیویتی اسپلش رو تغییر میدیم به تم جدید:

<activity android:name=”.ActivitySpl” android:theme=”@style/ActivitySpl”>

 

حالا تو فایل Styles.xml خط زیر را اضافه می‌کنیم:

<style name=”ActivitySpl” parent=”Theme.AppCompat.Light.NoActionBar”>

<item name=”colorPrimary”>@color/colorPrimary</item>
<item name=”colorPrimaryDark”>@color/colorPrimaryDark</item>
<item name=”colorAccent”>@color/colorSplAccent</item>

حالا یه ProgressBar  هم اضافه میکنیم تا در لحظه‌ای که برنامه میخواد اجرا بشه و تو اون چند ثانیه انتظار نمایش داده بشه.

<ProgressBar
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
style=”@style/Widget.AppCompat.ProgressBar”/>

 

بعد از نوشتن کدهامون یه AndroidManifest.xml را باز می‌کنیم تا تغییرات لازم را بدهیم.

اگه همه چیز را همونجور که بهتون گفتم انجام داده باشید باید اکتیویتی splash  باید اونجا تعریف شده باشه.

فقط موضوعی که هست اینه که چون اکتیویتی اسپلش باید قیل از همه اکتیویتی‌ها اجرا بشه باید جای MainAticvty را با ActivitySpl عوض کنیم تا اکتیویتی لانچر(LUNCHER ) ActivitySpl بشه.

 

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”
package=”rena.myapplication”>

<application
android:allowBackup=”true”
android:icon=”@mipmap/ic_launcher”
android:label=”@string/app_name”
android:supportsRtl=”true”
android:theme=”@style/AppTheme”>
<activity android:name=”.ActivitySpl”>
<intent-filter>
<action android:name=”android.intent.action.MAIN” />

<category android:name=”android.intent.category.LAUNCHER” />
</intent-filter>
</activity>
<activity android:name=”.MainActivity”></activity>
<activity android:name=”.Main2Activity” />

</application>

</manifest>

 

نتیجه کار رو میتونید ببینید:

 

به‌طور معمول تو قسمت اسپلش وقتی اون زمان انتظار برای بالا اومدن برنامه طی میشه کدهای مربوط به اتصال به دیتابیس و برقراری ارتباط با سرور نوشته میشه و در صورت نبودن هیچ مشکلی تو ارتباط برنامه بالا میاد و اکتیویتی اصلی اپلیکیشن باز میشه.

من اینجا فقط چند ثانیه توقف ایجاد شده و انتقال به MainActivity  را براتون می‌نویسم تا تو آموزشهای بعدی که اتصال به دیتابیس را آموزش دادم کدهای مربوطه را بهش اضافه کنیم.

تو ActivitySpl.java  کدهای زیر را برای ایجاد delay و باز کردن MainActivity می‌نویسیم:

 

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_spl);

int secondsDelayed = 1;
new Handler().postDelayed(new Runnable() {
public void run() {
startActivity(new Intent(G.context,MainActivity.class));
finish();
}
}, secondsDelayed * 5000);
}

کدی که اینحا نوشتیم کد بسیار ساده برای ایجاد  توقف چند ثانیه‌ای است. تون عدد 5000  که میبینید به میلی ثانیه است یعنی تو برنامه ما توقف 5 ثانیه خواهد بود .

 

ایجاد تولبار و اضافه کردن لوگو و آیکون به تولبار

ایجاد تولبار و اضافه کردن لوگو و آیکون  به تولبار

 

ما میخواهیم یه تولبار برای برنامه‌مون تعریف کنیم و چند تا آیکون مورد نیازمون رو بهش اضافه کنیم.

اول باید تم برنامه رو به حالت NoActionBar  تغییر بدیم تا تولبار پیش فرض رو نمایش نده.

فایل styles.xml  رو در فولدر res/values باز می‌کنیم و تم رو که DarkActionBar  را به NoActionBar  تغییر میدیم.

<resources>

<!– Base application theme. –>
<style name=”AppTheme” parent=”Theme.AppCompat.Light.NoActionBar”>
<!– Customize your theme here. –>
<item name=”colorPrimary”>@color/colorPrimary</item>
<item name=”colorPrimaryDark”>@color/colorPrimaryDark</item>
<item name=”colorAccent”>@color/colorAccent</item>
</style>

</resources>

در فولدر  layout فایلی یا لایه‌ای بنام toolbar.xml ایجاد می‌کنیم. و تگی بنام toolbar  تعریف میکنیم مانند کد زیر:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical” android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<android.support.v7.widget.Toolbar
android:layout_width=”match_parent”
android:background=”#ffcc00″
android:layout_height=”?attr/actionBarSize”>
<LinearLayout
android:orientation=”horizontal”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

</LinearLayout>
</android.support.v7.widget.Toolbar>
</LinearLayout>

 

بعد به اکتیویتی ActivityMain   میریم و toolbar  ایجاد شده را اضافه می‌کنیم.

<include layout=”@layout/toolbar”/>

تا اینجای کار ما یه تولبار اضافه کردیم با رنگ و مشخصاتی که خودمون تعریف کردیم.مانند تصویر زیر:

 

اون قسمت زرد رنگ بالای برنامه تولبار ایجاد شده توسط شماست.

بعد از ایجاد تولبار اختصاصی خودمون باید آیکون‌های مروبط به برنامه‌مون رو اضافه کنیم.

قبل از کد نویسی برید به سایتهای دانلود آیکون مثل flaticon.com و غیره  آیکون‌های مورد نیازتون رو دانلود کنید.

 

من لوگو سایت و این سه تا آیکون که بسیاری کاربردی هستن را با سایز و رنگ دلخواه خودم دانلود کردم و در فولدر drawable کپی کردم.

 

برای اینکه بتونید آیکونهای خودتونو دقیق تنظیم کنید پیشنهاد می‌کنم برای هر آیکون یک LinearLayout جداگانه بسازید و ImageView را داخل اونها قرار بدید.چون حتما تجربه کردید که تنظیم محل تصاویر کمی خسته کننده‌ ست.البته هر چی تجربه‌تون بیشتر بشه کار براتون ساده‌تر بشه.من دفعه اولی که اینمارو داشتم میکردم واقعا گیج شده بودم و به معنای واقعی داستم تو این کدها دست و پا میزدم.

من کد نهایی رو براتون میزارم شما فقط کافیه نام آیکونهای خودتونو جایگزین کنید.ولی پیشنهاد می‌کنم برای یکبار هم که شده خودتون بدون این کدها اینمارو از اول تا آخر انجام بدید.

 

 

<?xml version=”1.0″ encoding=”utf-8″?>
<?xml version=”1.0″ encoding=”utf-8″?>

<android.support.v7.widget.Toolbar android:layout_width=”match_parent”
android:background=”#f0e910″
android:layout_height=”?attr/actionBarSize”
xmlns:android=”http://schemas.android.com/apk/res/android”>

<LinearLayout
android:orientation=”horizontal”
android:gravity=”center”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

<LinearLayout
android:layout_width=”wrap_content”
android:orientation=”horizontal”
android:layout_weight=”1″
android:layout_height=”wrap_content”>

<LinearLayout
android:id=”@+id/linearFilnalBasket”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>
<TextView
android:id=”@+id/txtBasketCont”
android:textSize=”16dp”
android:textColor=”#ffffff”
android:text=”1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />

<ImageView
android:id=”@+id/serch”
android:layout_width=”32dp”
android:src=”@drawable/settings”
android:scaleType=”fitCenter”
android:layout_height=”32dp” />

</LinearLayout>

<ImageView
android:layout_marginRight=”32dp”
android:scaleType=”centerCrop”
android:layout_width=”32dp”
android:layout_gravity=”center_vertical”
android:src=”@drawable/emails”
android:id=”@+id/hambergurMenu”
android:layout_height=”32dp” />

</LinearLayout>

<LinearLayout
android:layout_gravity=”right”
android:padding=”0dp”
android:orientation=”horizontal”
android:gravity=”left”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>

<ImageView
android:layout_marginRight=”32dp”
android:scaleType=”fitCenter”
android:layout_width=”100dp”
android:id=”@+id/digikala”
android:src=”@drawable/aaaabi”
android:layout_height=”wrap_content” />

<ImageView
android:layout_width=”32dp”
android:src=”@drawable/help”
android:layout_marginRight=”32dp”
android:scaleType=”fitCenter”
android:layout_height=”32dp” />

</LinearLayout>

</LinearLayout>

</android.support.v7.widget.Toolbar>