برای جستجو کلمه مورد نظر خود را وارد کنید

به نام خدا کارد ویو

سلام ، در خدمتتون هستیم با آموزش کارد ویو CardView

 

کارت یک برگه متریال است که به عنوان یک نقطه ورودی جهت مشاهده اطلاعات با جزئیات بیشتر ارائه میشود. یک کارت میتواند شامل عکس، متن و یک لینک درباره یک موضوع واحد باشد.

کارت ها بهترین وسیله برای نمایش محتوا با ترکیبی از عناصر مختلف میباشند. آن ها همچنین برای نمایش عناصری که اندازه یا عملیات های پشتیبانی شده آن ها متغیر است، بسیار مناسب میباشند مانند تصاویر با توضیحات در طول های مختلف.

cc

برای اضافه کردن در اولین مرحله باید کتابخانه ی CardView رو در build.gradle وارد کنیم :

dependencies {  
  compile 'com.android.support:cardview-v7:23.2.1'
}

در مرحله ی بعد CardView رو درون لیوت مورد نظرمون قرار میدیدم و درون کارد ویو ، ویوهای مورد نظرمون مثل تکست ویو رو قرار میدیم :

<android.support.v7.widget.CardView  
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <TextView
        android:text="Hello World!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

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

برای اینکه Style مورد نظر خودمون رو پیاده کنیم به این شیوه عمل کنیم :

باید Custom Style خودمون رو در style.xml وارد کنیم :

<style name="MyCardViewStyle" parent="Theme.AppCompat.Light">  
    <item name="cardCornerRadius">2dp</item>
    <item name="cardElevation">2dp</item>
    <item name="contentPaddingBottom">24dp</item>
    <item name="contentPaddingTop">24dp</item>
    <item name="contentPaddingLeft">16dp</item>
    <item name="contentPaddingRight">16dp</item>
    <item name="cardBackgroundColor">@color/colorPrimary</item>
</style>

در این استایل تمامی موارد مورد نیاز برای کاردویو بصورت استاندارد وارد شدن : پدینگ از طرفین ، مقدار گردی گوشه ها و سایه

و برای وارد کردن رنگ مورد نظر ، کافیه که کد رنگ رو بجای این قسمت وارد کنیم :

@color/colorPrimary

و تنها کار باقی مونده وارد کردن این Style  برای CardView مورد نظر ماست :

<android.support.v7.widget.CardView  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/MyCardViewStyle">

نتیجه ی نهایی :

تصویر زیر تقریبا نمونه ی کاملی از کارد ویو هست در این آموزش سعی شده که آشنایی کامل با کارد ویو رو کسب کنیم ، برای ساختن کارد ویو مشابه تصویر زیر میبایست دو تکست ویو با اندازه های متن متفاوت بسته به جای اونها و یک باتن به کارد ویو اضافه کنید .

 

تصویر کارد ویو

کارد ویو CardView Style

__

امیداوریم که آموزش برای شما مفید بوده باشه ، موفق باشید .