Создание горизонтальной полосы прокрутки с помощью Json? - PullRequest
Новая
       9

Создание горизонтальной полосы прокрутки с помощью Json?

0 голосов
/ 22 сентября 2018

Я пытаюсь создать пользовательский интерфейс CardView ScrollBar, такой как Google Play.

Я следовал этому учебнику, но застрял в классах моделей и не могу двигаться дальше.

Мой Джсон такой: 

{
  "Cards": {
    "Recently Updated": [
      {
        "Name": "A",
        "img": "a.png",
        "link": "alink.com"
      },
      {
        "Name": "B",
        "img": "b.png",
        "link": "blink.com"
      },
      {
        "Name": "C",
        "img": "c.png",
        "link": "clink.com"
      }
    ],
    "Newly Arrives": [
      {
        "Name": "A",
        "img": "a.png",
        "link": "alink.com"
      },
      {
        "Name": "L",
        "img": "L.png",
        "link": "Llink.com"
      },
      {
        "Name": "z",
        "img": "z.png",
        "link": "zlink.com"
      }
    ]
  }
}

Пожалуйста, помогите создать то же самое.

Я хочу достичь так: enter image description here

Как добавить полосу прокрутки карт, как показано выше

1 Ответ

0 голосов
/ 22 сентября 2018

Чтобы создать модель, вам нужно следовать дереву, которое JSON показывает вам.Посмотрите на картинку от внешних прямоугольников до внутренних прямоугольников.

Json divided in blocks

Прежде всего, у вас есть весь контент JSON в виде блока.

Это будет мой первый класс модели

MainCard.java 

public class MainCard {

    @SerializedName("Cards")
    public Cards cards;

}

Обратите внимание, что моя основная карта (мой первый и самый большой прямоугольник) содержится внутри прямоугольника карт.Вот почему у него есть открытая переменная Cards.

Во-вторых, давайте перейдем ко второму прямоугольнику.(Карты)

Cards.java 

public class Cards {

    @SerializedName("Recently Updated")
    public List<Item> recentlyUpdates;
    @SerializedName("Newly Arrives")
    public List<Item> newlyArrives;

}

Внутри прямоугольника Карты есть два прямоугольника, Недавно обновленный и Недавно прибывший, поэтому я создал эти две переменные,

Наконец, обратите внимание, что прямоугольник внутри Недавно обновленного и прямоугольники внутри Нового Прибытия - это Список чего-то (который я назвал Предметом - [name, img, link]).Вот почему я создал недавно обновленную переменную в виде списка.

Item.java 

public class Item {

    @SerializedName("Name")
    public String name;
    @SerializedName("img")
    public String img_url;
    public String link;

}

NOTES

@ SerializedNameдолжно содержать точно такое же имя, которое ваш JSON предоставляет, например, в Cards.java, моя переменная name недавноUpdates, а my @SerializedName ("") недавно обновлено (это то же самое имя, которое мы имеем в ответе JSON).Однако если имя вашей переменной совпадает с именем JSON, вам не нужно указывать @SerializedName, это происходит в Item.java в переменной ссылки.

Модификация

Если JSON находится на онлайн-сервере, вам следует использовать некоторую библиотеку для вызова этого контента.Я бы порекомендовал вам использовать дооснащение 2 по квадрату .

Добавьте зависимости в файл build.gradle (Module: app) в разделе зависимостей. 

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0-rc02'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    // Retrofit 2
    implementation 'com.squareup.retrofit2:retrofit:2.4.0'
    implementation 'com.squareup.retrofit2:converter-gson:2.3.0'
}

Затем вы должны создать службу, которая будет вызывать ваш объект JSON.

CardsService.java (Примечание: это интерфейс) 

public interface CardsService {

    String BASE_URL = "http://yourbaseurl.api/";

    @GET("endpoint")
    Call<MainCard> getCards();

}

И в вашей MainActivityВы звоните в службу, чтобы получить данные JSON.

MainActivity.java 

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Retrofit retrofit = new Retrofit.Builder()
                .baseUrl(CardsService.BASE_URL)
                .addConverterFactory(GsonConverterFactory.create())
                .build();

        CardsService service = retrofit.create(CardsService.class);

        Call<MainCard> call = service.getCards();

        call.enqueue(new Callback<MainCard>() {
            @Override
            public void onResponse(Call<MainCard> call, Response<MainCard> response) {
                if (response.isSuccessful()) {
                    // Got a successful response (Code 200...300)

                    MainCard mainCard = response.body();

                    if (mainCard != null && mainCard.cards != null) {
                        List<Item> recentlyUpdates = mainCard.cards.recentlyUpdates;
                        List<Item> newlyArrives = mainCard.cards.newlyArrives;

                        // Use your information to set up the recyclerview as the tutorial you
                        // showed describe.
                        setupRecyclerView(recentlyUpdates, newlyArrives);
                    }
                } else {
                    // Got a unsucessful response (Code 401, 405, 409...)
                }
            }

            @Override
            public void onFailure(Call<MainCard> call, Throwable t) {
                // Failed to connect to the server
                // Possible causes: No internet connection, Server is broken.
            }
        });
    }
}

Если вы не являетесь членом семьи с модернизацией, вы должны прочитать некоторые учебные пособия на средних, как этот , и вы также можете проверить этот проект , чтобы узнать больше о теме.

РЕДАКТИРОВАТЬ

КАК УСТАНОВИТЬ ПУНКТЫ В ПРОСМОТРЕ РЕЙКЛЕРА?

После того, как вы получите успешный ответ, вы можете вызвать метод setupRecyclerView(List<Item> items), чтобы отобразить ваши предметы в виде переработчика.Я сделаю это, используя только список недавних обновлений, затем вы настроите так, как хотите отображать оба. 

                if (response.isSuccessful()) {
                    // Got a successful response (Code 200...300)

                    MainCard mainCard = response.body();

                    if (mainCard != null && mainCard.cards != null) {
                        List<Item> recentlyUpdates = mainCard.cards.recentlyUpdates;
                        List<Item> newlyArrives = mainCard.cards.newlyArrives;

                        // ***** Use your information to set up the recyclerview. ***** 
                        // I am going to set up only the recentlyUpdates list.
                        setupRecyclerView(recentlyUpdates);
                    }
                }

Создайте RecyclerView в своем XML-файле

activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</android.support.constraint.ConstraintLayout>

MainActivity.java

Вернитесь к своей деятельности, добавьте представление переработчика, добавьте менеджер макета и адаптер. 

private void setupRecyclerView(List<Item> itemsList) {

        RecyclerView mRecyclerView = findViewById(R.id.recycler_view);

        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(linearLayoutManager);

        mRecyclerView.setAdapter(new MyCardsAdapter(itemsList, this));
    }

MyCardsAdapter.java 

public class MyCardsAdapter extends RecyclerView.Adapter<MyCardsAdapter.ItemHolder> {

    private List<Item> itemsList;
    private Context context;

    public MyReposAdapter(List<Item> itemsList, Context context) {
        this.itemsList = itemsList;
        this.context = context;
    }

    @NonNull
    @Override
    public ItemHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.single_item, parent, false);

        return new ItemHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ItemHolder holder, int position) {

        // Get each item.
        Item singleItem = itemsList.get(position);

        // singleItem is each Item.java you created. And holder contains the widgets you created in single_item.xml to display the items information.
        holder.textViewName.setText(singleItem.name);
        holder.textViewImage.setText(sigleItem.image_url);
        holder.textViewLink.setText(singleItem.link);

    }

    @Override
    public int getItemCount() {
        return itemList.size();
    }


    public class ItemHolder extends RecyclerView.ViewHolder {

        public TextView textViewName;
        public TextView textViewImage;
        public TextView textViewLink;

        public ItemHolder(View itemView) {
            super(itemView);

            textViewName = itemView.findViewById(R.id.text_name);
            textViewImage = itemView.findViewById(R.id.text_image);
            textViewLink = itemView.findViewById(R.id.text_link);

        }

    }

}

single_item.xml

Это макет каждого элемента, который будет отображаться вВзгляд переработчика. 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

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

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp">

            <!-- 1. Name -->
            <TextView
                android:id="@+id/text_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="Name"
                android:textSize="22sp"
                android:textColor="@color/colorBlack"
                android:textStyle="bold"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintTop_toTopOf="parent"/>

            <!-- 2. Image URL -->
            <TextView
                android:id="@+id/text_image"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="URL"
                android:textSize="18sp"
                android:textColor="@color/colorPrimary"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintTop_toBottomOf="@+id/text_name"/>

            <!-- 3. Link -->
            <TextView
                android:id="@+id/text_link"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="Language"
                android:textSize="16sp"
                android:textColor="@color/colorBlack"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintTop_toBottomOf="@+id/text_url"/>

        </android.support.constraint.ConstraintLayout>

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

</android.support.constraint.ConstraintLayout>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...