이번엔 GridLayout을 위한 adapter를 만들어보도록 하겠습니다. 그렇게 큰 차이는 없으나 이번엔 Retrofit를 이용한 통신까지 적용하겠습니다.


1. ViewHolder 지정


public class FlowerAdapter_grid extends RecyclerView.Adapter<FlowerAdapter_grid.Holder> {
 
    private static final Object TAG = FlowerAdapter_grid.class.getSimpleName();
    private final FlowerClickListener mListener;
    private List<Flower> mFlowers;
    public FlowerAdapter_grid(FlowerClickListener listener) {
        mFlowers = new ArrayList<>();
        mListener = listener;
    }
}
cs

GridLayout도 일종의 RecyclerView입니다. 그러므로 RecyclerView에서 GridLayout을 위한 뷰홀더를 작성할 것입니다. 그러기 위해선 ViewHolder의 extends가 필요합니다. 변수지정은 따로 언급하지 않겠습니다.


    @Override
    public Holder onCreateViewHolder(ViewGroup parent, int viewType) {
        View row = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_item_grid, parent, false);
        return new Holder(row);
    }
cs

ViewHolder가 작성될 때 바로 layout에 적용될 수 있게 LayoutInflater.from(parent.getContext()).inflate(R.layout.row_item_grid, parent, false) 이 부분이 필요합니다. 그리고 지난시간에도 그랬듯이 ViewHolder처리 과정에서 Glide도 처리해줍니다. 

    @Override
    public void onBindViewHolder(Holder holder, int position) {
        Flower currFlower = mFlowers.get(position);
        Glide.with(holder.itemView.getContext())
                .load(currFlower.getImage())
                .thumbnail(0.5f)
                .crossFade()
                .into(holder.mImage);
    }
cs


이번엔 Glide를 thumbnail로 쓸 것입니다. 0.5f는 원본의 0.5만큼의 수준으로 thumbnail로 사용한다는 뜻입니다. crossfade()를 통해 애니메이션 효과도 부여할 수 있습니다.


    @Override
    public int getItemCount() {
        return mFlowers.size();
    }
 
    public void addFlower(Flower flower) {
        mFlowers.add(flower);
        notifyDataSetChanged();
    }
cs


이렇게 포스트의 사이즈를 가져오거나 새로운 포스트를 추가할 수 있습니다. 지난번과 코드가 동일합니다.


    public void clear(){
        mFlowers.clear();
        notifyDataSetChanged();
    }
 
    public Flower getSelectedFlower(int position) {
        return mFlowers.get(position);
    }
cs


포스트를 클리어할 때 사용됩니다. 지난번과 같은 코드입니다.


public class MyPagerAdapter extends FragmentPagerAdapter {
 
    public Fragment[] arrFragments;
    public MyPagerAdapter(FragmentManager fm, Fragment[] arrFragmnets) {
        super(fm);
        this.arrFragments = arrFragmnets;
    }
 
    @Override
    public Fragment getItem(int position) {
        return arrFragments[position];
    }
 
    @Override
    public int getCount() {
        return arrFragments.length;
    }
}
cs


이렇게 Fragment에 Adapter를 달아줍니다. 이제 여기선 apiservice도 작성할 것입니다. 위에선 Fragment getItem() 에서 arrFragments의 position 값을 return 합니다. 포스트의 수를 세기 위해 getCount()를 작성했습니다. arrFragments.length가 전체 포스트의 수를 반영합니다.


2. apiService 작성


public interface FlowerApiService {
 
    @GET("posts/")
    Call<List<Flower>> getAllFlowers(@Query("user_lat"String lat, @Query("user_lon"String lon);
}
cs


다른 apiservice 도 만들도록 합니다. apiService는 사전에 만들어둠으로써 나중에 retrofit 통신을 수월하게 해 줍니다. 포스트들의 위도와 경도값을 받는 apiservice를 만들겠습니다.


public interface LoginApiService {
 
    String string = "client_Id";
 
    @POST("rest-auth/login/")
    Call<MyKey> getget(@Body LoginData loginData);
}
cs

이것은 로그인을 위한 apiService입니다. 로그인시에 필요한 데이터를 받습니다. 어디로 데이터를 전송할지 url을 설정할 수 있습니다. 저는 @POST("rest-auth/login/")에서 나와있듯 host주소/rest-auth/login/으로 통신할 것입니다. 


public interface PostApiService {
 
    @Multipart
    @POST("posts/")
    Call<ResponseBody> uploadFile (@Part MultipartBody.Part part, @Part("point") RequestBody pointString, @Part("text") RequestBody textString);
}
cs


이 것은 포스트를 위한 apiService입니다. 이 것을 통해 글의 등록이 가능합니다. 주소가 바뀌었습니다. 위의 주소와 다른 주소로 통신합니다.

그 다음은 유저 등록을 위한 부분입니다. 유저 등록을 위한 주소가 따로 존재합니다.


public interface RegistrationApiService {
    @Multipart
    @POST("rest-auth/registration/")
    Call<ResponseBody> registersecond (@Part("username") RequestBody username, @Part("email") RequestBody email, @Part("password1") RequestBody password1, @Part("password2") RequestBody password2);
}
cs


유저 등록시에 비밀번호와 비밀번호 재확인을 위해 두 번 변수를 입력받기 때문에 @Part 부분이 여러개로 나눠져있습니다. 


3. REST Manager 작성

저는 서버와 클라이언트의 REST통신을 이용하고 있으므로 REST 통신을 위한 apiservice도 만들어주면 편리합니다.

서버에서 http요청의 header값을 살펴보게 되므로 그 header값을 자동으로 지정해주는 RestManager를 작성하겠습니다.



public class RestManager {
 
    static Context mContext;
 
    private FlowerApiService mFlowerApiService;
 
    public FlowerApiService getmFlowerApiService(Context context) {
        if (mFlowerApiService==null) {
 
            mContext = context;
 
            OkHttpClient client = new OkHttpClient();
            OkHttpClient.Builder builder = new OkHttpClient.Builder();
            builder.interceptors().add(new AddCookiesInterceptor(mContext));
            client = builder.build();
 
            Retrofit retrofit = new Retrofit.Builder()
                    .client(client)
                    .baseUrl(Constants.BASE_URL)
                    .addConverterFactory(GsonConverterFactory.create())
                    .build();
 
            mFlowerApiService = retrofit.create(FlowerApiService.class);
        }
 
        return mFlowerApiService;
    }
}
cs

이러면 자동으로 okhttpclient에 헤더와 바디를 추가해줍니다. 원하는 대로 원하는 값을 넣을 수 있으므로 필요하신 대로 작성하셔서 쓰면 됩니다. GsonConverterFactory는 구글에서 제공하는 json데이터 처리용 도구입니다. retrofit를 이용해서 통신을 할 때마다 쉽게 헤더를 조절할 수 있기에 여러가지 만들어두고 사용하시면 편리할 것입니다.


지난 포스트들에서 자주 사용된 Adapter를 설명하겠습니다. Adapter는 데이터 모델들을 원하는 상황에 적용할 수 있게 도와줍니다.


1. 준비물

먼저 만들었던 flower 모델이랑 flowerapi를 가져옵니다. post를 다루기 위한 모델과 api입니다. 덤으로 Glide도 가져옵니다. 여기서 Glide를 처리해 주어야합니다.


import com.bumptech.glide.Glide;
import com.example.keepair.myapplication.R;
import com.example.keepair.myapplication.model.Flower;
cs


2. Adapter ViewHolder 작성

그 다음에 Adapter랑 RecyclerView.Adapter를 만들어줍니다. RecyclerView를 사용하지 않는다면 다른 뷰를 extends 해도 괜찮습니다. Adapter에서 제공하는 Holder를 불러와서 사용합니다.


public class FlowerAdapter extends RecyclerView.Adapter<FlowerAdapter.Holder> {
}
cs

Adapter에 Holder를 붙여줘야 합니다. 그렇지 않으면 제대로 작동하지 않습니다.


    private static final Object TAG = FlowerAdapter.class.getSimpleName();
    private final FlowerClickListener mListener;
    private List<Flower> mFlowers;
cs


이렇게 변수를 지정해줍니다. getSimpleName()은 지난번에 설명한 글에 설명되어 있습니다.

http://codehanry.tistory.com/16 을 참고하시면 됩니다.


    public FlowerAdapter(FlowerClickListener listener) {
        mFlowers = new ArrayList<>();
        mListener = listener;
    }
cs


Adapter에 쓸 ArrayList를 만들도록 합니다. 포스트들의 양이 많으므로 추가하기 쉽게 ArrayList를 사용합니다.


    @Override
    public void onBindViewHolder(Holder holder, int position) {
 
        Flower currFlower = mFlowers.get(position);
 
        holder.mAuthor.setText(currFlower.getAuthor());
 
        holder.mText.setText(currFlower.getText());
        Glide.with(holder.itemView.getContext())
                .load(currFlower.getImage())
                .override(300300)
                .centerCrop()
                .into(holder.mImage);
    }
cs


여기서 뷰홀더를 작성합니다. 뷰홀더는 Adapter에서 Holder를 가져왔으므로 onBindViewHolder를 사용할 수 있게 되었습니다. position을 가져와서 currFlower에 넣어줍니다. position 값은 recyclerView에서의 포스트 위치를 의미하는 인자입니다. 글라이드 옵션도 조절할 수 있습니다. override()를 이용해 크기와 사진의 질을 조정합니다.


다음은 포스트를 클릭할 때의 기능을 구현합니다.


    public class Holder extends RecyclerView.ViewHolder implements View.OnClickListener {
 
        private ImageView mImage;
        private TextView mAuthor, mText;
 
        public Holder(View itemView) {
 
            super(itemView);
 
            mImage = (ImageView) itemView.findViewById(R.id.iv_photo);
            mAuthor = (TextView) itemView.findViewById(R.id.tv_author);
            mText = (TextView) itemView.findViewById(R.id.tv_text);
 
            itemView.setOnClickListener(this);
        }
    }
 
cs


RecyclerView에 결합시킬 것이므로 ViewHolder를 RecyclerView에서 가져오게 됩니다. implements를 통해 onClickListener를 구현하게 됩니다. 


        @Override
        public void onClick(View view) {
            mListener.onClick(getLayoutPosition());
        }
cs


이 부분을 추가해줘야 합니다. 그러면 클릭시에 Position을 가져오는 기능을 담당합니다. 이런 구조에서는 Position의 위치값이 중요하게 여겨집니다. 이게 글 번호를 의미한다고 생각해도 됩니다.


3. 포스트 세부설정 


    @Override
    public int getItemCount() {
        return mFlowers.size();
    }
 
    public void addFlower(Flower flower) {
        mFlowers.add(flower);
        notifyDataSetChanged();
    }
cs

여기서 포스트의 사이즈를 고르고 포스트의 추가를 결정합니다. 포스트의 추가는 자동적으로 이루어지게 됩니다. 앞서 설명한 infinite Scroll과 연관됩니다.


    public void clear(){
        mFlowers.clear();
        notifyDataSetChanged();
    }
 
    public Flower getSelectedFlower(int position) {
        return mFlowers.get(position);
    }
cs


여기서 clear()는 데이터에 변화가 있을 시에 작동합니다. 혹은 변화를 줄 시에 포스트들을 초기화하는 역할을 합니다.

    public interface FlowerClickListener {
        void onClick(int position);
    }

cs


포스트를 클릭했을 시에 위치값을 이용해 그 포스트에 관련한 동작을 수행하고 싶다면 작성합니다. interface를 통해 포스트에 추가적인 동작을 부여할 수 있습니다.

1. settings.py

GeoDjango를 사용하기 위해선 INSTALLED_APPS 와 site_id를 설정해주어야 합니다.


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites',
    'django.contrib.gis',
    'blog',
    'rest_framework',
    'rest_framework.authtoken',
    'rest_auth',
    'allauth',
    'allauth.account',
    'rest_auth.registration',
]
SITE_ID = 1
cs


이렇게 rest_framework랑 allauth를 쓰기 위해선 SITE_ID = 1 을 써줘야 합니다.

그리고 현재 사용하고 있는 rest_auth를 위해 settings.py 에 추가할 것이 또 있습니다.


REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework.authentication.TokenAuthentication',
),
'DEFAULT_PERMISSION_CLASSES': (
'rest_framework.permissions.AllowAny',
),
}


이렇게 추가해줘야 token으로 로그인이 가능합니다. 데이터베이스도 gis기능이 있는 걸로 바꿔줘야 합니다. postgresql의 postgis를 쓰겠습니다. 그러면 settings.py에 명시하도록 합니다. postgis 는 postgresql에서 위치 데이터를 위해 개조된 버전이라고 생각됩니다.

postgis : https://postgis.net/


DATABASES = {
'default': {
'ENGINE': 'django.contrib.gis.db.backends.postgis',
'NAME': 'postgres',

'USER': 'foryoumydarling',

'PASSWORD': 'darlingdarling',

'HOST': '127.0.0.1',
'PORT': '5432',
}
}

이런식으로 database도 gis시스템에 맞게 설정해줘야 하는 것을 잊으면 안 됩니다. 127.0.0.1은 로컬호스트를 의미합니다. 컴퓨터 한 대로 다 실행할 것이니 127.0.0.1 로 지정해줍니다.


그 다음엔 url을 정리합니다.

2. urls.py

    url(r'^accounts/', include('allauth.urls')),
    url(r'^rest_auth/', include('rest_auth.urls')),
    url(r'^rest-auth/registration/', include('rest_auth.registration.urls')),
cs


나머지는 원하는 대로 만드시면 됩니다. 아래는 제 코드입니다.


    url(r'^$', TemplateView.as_view(template_name="home.html"), name='home'),
    url(r'^signup/$', TemplateView.as_view(template_name="signup.html"),
        name='signup'),
    url(r'^email-verification/$',
        TemplateView.as_view(template_name="email_verification.html"),
        name='email-verification'),
    url(r'^login/$', TemplateView.as_view(template_name="login.html"),
        name='login'),
    url(r'^logout/$', TemplateView.as_view(template_name="logout.html"),
        name='logout'),
    url(r'^password-reset/$',
        TemplateView.as_view(template_name="password_reset.html"),
        name='password-reset'),
    url(r'^password-reset/confirm/$',
        TemplateView.as_view(template_name="password_reset_confirm.html"),
        name='password-reset-confirm'),
 
cs


이런식으로도 url을 테스트 해 봤습니다. user_details.html은 제가 만들었습니다.

나머지 템플릿도 취향따라 바꾸셔도 됩니다. TemplateView.as_view가 모든 url에 적용되었으니 views.py에서 할 일은 상당히 줄어들 것입니다.


    url(r'^user-details/$',
        TemplateView.as_view(template_name="user_details.html"),
        name='user-details'),
    url(r'^password-change/$',
        TemplateView.as_view(template_name="password_change.html"),
        name='password-change'),
cs


이것도 써보려고 했습니다. password-reset 시에 url에 pk인자를 넘겼습니다. django 2.0 버전에선 pk 인자를 넘기는 방법이 조금 달라졌으니 유의하시기 바랍니다.


    url(r'^password-reset/confirm/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$',
        TemplateView.as_view(template_name="password_reset_confirm.html"),
        name='password_reset_confirm'),
 
    url(r'^rest-auth/', include('rest_auth.urls')),
    url(r'^rest-auth/registration/', include('rest_auth.registration.urls')),
    url(r'^account/', include('allauth.urls')),
    url(r'^admin/', include(admin.site.urls)),
    url(r'^accounts/profile/$', RedirectView.as_view(url='/', permanent=True), name='profile-redirect'),
cs


include를 통해 전체적인 url구조를 결정했습니다.

이렇게 까지 설정하니 더 설정할 것이 없었습니다. serializers.py를 만들겠습니다.


3. serializers.py

기본적으로 rest_framework에서 제공하는 serializers 모듈을 가져옵니다. serializer는 json같은 형태로 데이터를 변경시켜주는 역할을 합니다.

from rest_framework import serializers
from blog.models import Post
from django.contrib.auth.models import User
from drf_extra_fields.geo_fields import PointField
cs


serializer class를 만들도록 합니다.


class UserSerializer(serializers.ModelSerializer):
    related_postwriter = serializers.PrimaryKeyRelatedField(many=True, read_only=True)
    class Meta:
        model = User
        fields = ('username''email''related_postwriter')
cs


User 모델을 위한 serializer입니다. django의 form과 모양이 상당히 닮아있습니다.


class PostSerializer(serializers.ModelSerializer):
    author = serializers.ReadOnlyField(source='author.username')
    point = PointField(required=True) #이것은 선택사항, 사용자가 결정할 일이므로 신중하게 선택하자.
    class Meta:
        model = Post
        # fields = ('author', 'text', 'image', )
        fields = ('author''text''image''point''created_date')
    def create(self, validated_data):
        validated_data['author'= self.context['request'].user
        return super(PostSerializer, self).create(validated_data)
cs


create 같은 함수를 따로 지정해주어 어떻게 REST통신시에 serializer가 함수를 처리할 지 지정할 수 있습니다.

Post 모델을 위한 serializer입니다.

import 를 잊지 맙시다.


이렇게하면 django-rest-framework의 기본 설정이 끝납니다. 

끝으로, drf_extra_fields는 구글에 검색하면 다운받을 수 있습니다. Point를 편리하게 조작할 수 있게 해 줍니다.


drf_extra_fields : https://github.com/Hipo/drf-extra-fields

+ Recent posts