آموزش قرار دادن json در Expandable Recyclerview
سلام ذوستان در این سری از آموزش برنامه نویسی اندروید بهآموزش قرار دادن json در Expandable Recyclerview در برنامه نویسی اندروید می پردازیم قبلتر پست های مختلفی درباره Expandable Recyclerview قرار داده بودیم امروز به دریافت json از یک url و قرار دادن دیتای parse (تجزیه) شده آن در Expandable Recyclerview خواهیم پرداخت در ادامه با ما همراه باشید.
در این آموزش از چهار کتاب خانه زیر استفاده شده است.
- Recyclerview برای متریال دیزاین و ساخت Expandable Recyclerview
- CardView برای متریال دیزاین
- volley برای دریافت json از اینترنت
- glide برای بارگذاری عکس در برنامه
پس برای ابتدای کار وارد فایل Build.gradle از نوع Module شده و در بخش dependencies خط های زیر را اضافه کنید.
1 2 3 4 | compile 'com.android.support:recyclerview-v7:25.3.1' compile 'com.android.support:cardview-v7:25.3.1' compile 'com.android.volley:volley:1.0.0' compile 'com.github.bumptech.glide:glide:4.0.0-RC1' |
پروژه را sync کنید.
دوستان دقت کنید ما در این آموزش از layout جدید گوگلی یعنی Constraint Layout استفاده می کنیم آموزش آن را می توانید در لینک زیر مشاهده کنید.
لینک
json ما در آدرس زیر قرار دارد (json از سایت دیگر گرفته شده است)
1 | http://programchi.ir/api/expandable-recyclerview.php |
یک کلاس به نام Hero.java ایجاد کرده و کد های زیر را در آن قرار دهید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | package ir.programchi; /** * Created by Jefferson on 7/15/2017. */ public class Hero { private String name, realName, team, firstAppearance, createdBy, publisher, imageUrl, bio; public Hero(String name, String realName, String team, String firstAppearance, String createdBy, String publisher, String imageUrl, String bio) { this.name = name; this.realName = realName; this.team = team; this.firstAppearance = firstAppearance; this.createdBy = createdBy; this.publisher = publisher; this.imageUrl = imageUrl; this.bio = bio; } public String getName() { return name; } public String getRealName() { return realName; } public String getTeam() { return team; } public String getFirstAppearance() { return firstAppearance; } public String getCreatedBy() { return createdBy; } public String getPublisher() { return publisher; } public String getImageUrl() { return imageUrl; } public String getBio() { return bio; } } |
کلاس بالا به نام getter و setter شناخته می شود.
در layout اصلی که در اینجا نام آن برابر با activity_main.xml کد های زیر را قرار دهید.
1 2 3 4 5 6 7 8 9 10 11 12 | <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> |
در بالا یک RecyclerView قرار داده ایم تا cardview و بقیه اجزا در آن قرار گیرند.
ما در اینجا آداپتور سفارشی داریم پس باید یک layout سفارشی برای قرارگیری داده های که از اینترنت دریافت می شود داشته باشیم پس یک فایل در پوشه layout به نام list_layout_heroes.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/textViewName" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#ff3847" android:padding="10dp" android:text="Iron Man" android:textAlignment="center" android:textAppearance="@style/Base.TextAppearance.AppCompat.Large.Inverse" /> <LinearLayout android:animateLayoutChanges="true" android:id="@+id/linearLayout" android:visibility="gone" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/imageView" android:scaleType="fitXY" android:layout_width="match_parent" android:layout_height="wrap_content" /> <TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="15dp"> <TableRow> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Real Name " /> <TextView android:id="@+id/textViewRealName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tony Stark" android:textStyle="bold" /> </TableRow> <TableRow> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Team " /> <TextView android:id="@+id/textViewTeam" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Avengers" android:textStyle="bold" /> </TableRow> <TableRow> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="First Appearance " /> <TextView android:id="@+id/textViewFirstAppearance" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1974" android:textStyle="bold" /> </TableRow> <TableRow> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Created By " /> <TextView android:id="@+id/textViewCreatedBy" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Stan Lee" android:textStyle="bold" /> </TableRow> <TableRow> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Publisher " /> <TextView android:id="@+id/textViewPublisher" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Marvel Comics" android:textStyle="bold" /> </TableRow> <TableRow> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Bio " /> <TextView android:id="@+id/textViewBio" android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="textMultiLine" android:text="Steven Rogers was born in the Lower East Side of Manhattan, New York City, in 1925 to poor Irish immigrants, Sarah and Joseph Rogers.[54] Joseph died when Steve was a child, and Sarah died of pneumonia while Steve was a teen. By early 1940, before America's entry into World War II, Rogers is a tall, scrawny fine arts student specializing in illustration and a comic book writer and artist." android:textStyle="bold" /> </TableRow> </TableLayout> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView> </RelativeLayout> |
کد بالا شکل زیر را ایجاد می کند.
در بالا یکی از آنها نمایش داده شده است.
حالا باید انیمیشن expand و collapse (باز و بسته شدن ) را ایجاد کنیم.
ابتدای یک پوشه به نام anim در res ایجا کنید و در آن پوشه یک فایل به نام slide_down.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.
1 2 3 4 5 6 7 8 9 | <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:duration="500" android:fromXScale="1.0" android:fromYScale="0.0" android:toXScale="1.0" android:toYScale="1.0" /> </set> |
زمان ایجاد آداپتور است.
یک فایل جاوا به نام HeroAdapter.java ایجاد کرده و کدهای زیر را در آن قرار دهید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | package ir.programchi; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.transition.AutoTransition; import android.transition.TransitionManager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import android.widget.Toast; import com.bumptech.glide.Glide; import java.util.List; /** * Created by Jefferson on 7/15/2017. */ public class HeroAdapter extends RecyclerView.Adapter<HeroAdapter.HeroViewHolder> { private List<Hero> heroList; private Context context; private static int currentPosition = 0; public HeroAdapter(List<Hero> heroList, Context context) { this.heroList = heroList; this.context = context; } @Override public HeroViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_layout_heroes, parent, false); return new HeroViewHolder(v); } @Override public void onBindViewHolder(final HeroViewHolder holder, final int position) { Hero hero = heroList.get(position); holder.textViewName.setText(hero.getName()); holder.textViewRealName.setText(hero.getRealName()); holder.textViewTeam.setText(hero.getTeam()); holder.textViewFirstAppearance.setText(hero.getFirstAppearance()); holder.textViewCreatedBy.setText(hero.getCreatedBy()); holder.textViewPublisher.setText(hero.getPublisher()); holder.textViewBio.setText(hero.getBio().trim()); Glide.with(context).load(hero.getImageUrl()).into(holder.imageView); holder.linearLayout.setVisibility(View.GONE); if (currentPosition == position) { Animation slideDown = AnimationUtils.loadAnimation(context, R.anim.slide_down); holder.linearLayout.setVisibility(View.VISIBLE); holder.linearLayout.startAnimation(slideDown); } holder.textViewName.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { currentPosition = position; notifyDataSetChanged(); } }); } @Override public int getItemCount() { return heroList.size(); } class HeroViewHolder extends RecyclerView.ViewHolder { TextView textViewName, textViewRealName, textViewTeam, textViewFirstAppearance, textViewCreatedBy, textViewPublisher, textViewBio; ImageView imageView; LinearLayout linearLayout; HeroViewHolder(View itemView) { super(itemView); textViewName = (TextView) itemView.findViewById(R.id.textViewName); textViewRealName = (TextView) itemView.findViewById(R.id.textViewRealName); textViewTeam = (TextView) itemView.findViewById(R.id.textViewTeam); textViewFirstAppearance = (TextView) itemView.findViewById(R.id.textViewFirstAppearance); textViewCreatedBy = (TextView) itemView.findViewById(R.id.textViewCreatedBy); textViewPublisher = (TextView) itemView.findViewById(R.id.textViewPublisher); textViewBio = (TextView) itemView.findViewById(R.id.textViewBio); imageView = (ImageView) itemView.findViewById(R.id.imageView); linearLayout = (LinearLayout) itemView.findViewById(R.id.linearLayout); } } } |
کار کد بالا دریافت متن ها وset کردن آنها و عکس در بخش های تعریف شده است و بخش جدید کد بالا animation است که قرار گرفته است.
و در آخر باید json را دریافت کنیم.
وارد فایل MainActivity.java شده و کدهای زیر را قرار دهید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | package ir.programchi; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import com.android.volley.Request; import com.android.volley.RequestQueue; import com.android.volley.Response; import com.android.volley.VolleyError; import com.android.volley.toolbox.StringRequest; import com.android.volley.toolbox.Volley; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { final String URL_GET_DATA = "http://programchi.ir/api/expandable-recyclerview.php"; RecyclerView recyclerView; HeroAdapter adapter; List<Hero> heroList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); recyclerView = (RecyclerView) findViewById(R.id.recyclerView); recyclerView.setHasFixedSize(true); recyclerView.setLayoutManager(new LinearLayoutManager(this)); heroList = new ArrayList<>(); loadHeroes(); } private void loadHeroes() { StringRequest stringRequest = new StringRequest(Request.Method.GET, URL_GET_DATA, new Response.Listener<String>() { @Override public void onResponse(String response) { try { JSONArray jsonArray = new JSONArray(response); for (int i = 0; i < jsonArray.length(); i++) { JSONObject obj = jsonArray.getJSONObject(i); Hero hero = new Hero( obj.getString("name"), obj.getString("realname"), obj.getString("team"), obj.getString("firstappearance"), obj.getString("createdby"), obj.getString("publisher"), obj.getString("imageurl"), obj.getString("bio") ); heroList.add(hero); } adapter = new HeroAdapter(heroList, getApplicationContext()); recyclerView.setAdapter(adapter); } catch (JSONException e) { e.printStackTrace(); } } }, new Response.ErrorListener() { @Override public void onErrorResponse(VolleyError error) { } }); RequestQueue requestQueue = Volley.newRequestQueue(this); requestQueue.add(stringRequest); } } |
در بالا json توسط کتاب خانه volley دریافت شده و سپس با تجزیه json با آداپتور سفارشی که ساختیم داده در layout قرار می گیرد.
فراموش نکنید دسترسی اینترنت را در AndroidManifest.xml اضافه کنید.
1 | <uses-permission android:name="android.permission.INTERNET" /> |
این آموزش هم به پایان رسید.
موفق و پیروز باشید.
سلام لطفا سورس apiکه با phpهستش رو ارسال میکنید باتشکر
درود
این Project را در AIDE Studio که App اندروید است بازنویسی شد و کتابخانه های مورد نظر را هم تطبیق داده شد.
ولی در پرونده MainActivity.java برنامه به تمام دستورات (this) خطا میگیرد و آنها را main_activity فرض میکند و خطای تطبیق میدهد. آیا نمیشود در کدهایتان this را به طور سرراست مقدار دهی کنیم یعنی به چه شیئ یا method اشاره دارد. در نمونه کدهای مشابه دیگر نیز این خطا وجود دارد.
با سپاس.