쪼렙 as! 풀스택

Android - Module 이용하여 비슷한 앱 여러개 찍어내기 본문

개발 일지/iOS & Android

Android - Module 이용하여 비슷한 앱 여러개 찍어내기

코코앱 2017. 6. 8. 17:11


1. 새로운 프로젝트를 생성한다. 일단 이름을 RedApp 으로 하겠다.






2. Empty Activity 를 선택하고, 처음 시작할 메인 액티비티의 이름을 RedMainActiity 로 변경해주자. - Finish.




3. 모듈을 추가하기 전에 현재의 모듈 이름이 app 인데, 나중에 만들 blueapp 과 구분하기 위해, 모듈 이름을 redapp 으로 리팩토링 해주겠습니다. app 에 우클릭 - Refactor - Rename -> 'redapp' 입력





4. RedApp과 BlueApp 에서 공통으로 이용할 모듈을 추가하겠습니다. 메뉴 File - New - New Module 클릭 - Android Library 선택. (Android Library 는 자체로는 앱이되지는 않고, Activity 나 Drawable, Layout 같은 여러가지 안드로이드 라이브러리들을 가질 수 있는 모듈입니다.)





5. 공통으로 사용할 안드로이드 리소스 모듈을 'CommonLibrary' 라고 명명하겠습니다. module name을 확인해주세요





6. redapp 의 build.gradle 의 dependencies 에 모듈을 추가합니다.

compile project(':commonlibrary')

그리고 Sync Now 를 눌러주면, 그래들이 돌고 이제부터 redapp 모듈에서 commonlibrary 에 있는 소스들을 이용할 수 있게 됩니다.





7. 이제부터 공동으로 사용할 액티비티 두개를 만들것입니다. 일단 최초 실행될 공통의 Activity인 BaseMainActivity 와, 버튼을 클릭하면 뜨는 SecondActivity 를 만들것입니다. 그리고 레이아웃으로 사용할 activity_base.xml도 만들것입니다. 아래 스크린샷과 같이 commonlibrary 에다 클래스와 레이아웃을 생성하면 되겠습니다.



각 세개의 소스는 아래와 같습니다.


- layout/activity_base.xml

<?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="match_parent"
>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="버튼"
android:textSize="30sp"
android:layout_centerInParent="true"
android:textStyle="bold"
/>

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button"
android:layout_centerHorizontal="true"
android:text="버튼 위에 텍스트뷰"
android:textSize="20sp"
/>
</RelativeLayout>





- BaseMainActivity.java

public class BaseMainActivity extends AppCompatActivity {

protected Button button;
protected TextView textView;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_base);

this.textView = (TextView) findViewById(R.id.textView);

this.button = (Button) findViewById(R.id.button);
this.button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(BaseMainActivity.this, SecondActivity.class);
startActivity(intent);
}
});
}




- SecondActivity.java

public class SecondActivity extends AppCompatActivity {

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

TextView textView = (TextView) findViewById(R.id.textView);
textView.setText("세컨드 액티비티입니다");

Button button = (Button) findViewById(R.id.button);
button.setText("닫기");
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
}



8. redapp 의 manifests 에다, SecondActivity 를 등록해줍니다.

- redapp / AndroidManifest.xml

<application
    ...
<activity android:name="com.kokohapps.commonlibrary.SecondActivity"/>
    ...
</application>





9. redapp 의 manifests 를 보면, RedMainActivity 로 시작하게 되어있습니다. 이 RedMainActivity는 BaseMainActivity 를 서브클래싱 해서 사용하도록 하겠습니다. 이러는 이유는, BaseMainActivity 를 공통으로 사용하기도 하면서, RedApp 만의 특징도 함께 사용하기 위해서 입니다. 코드는 아래와 같습니다.

import com.kokohapps.commonlibrary.BaseMainActivity;

public class RedMainMainActivity extends BaseMainActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

this.button.setTextColor(ContextCompat.getColor(this, R.color.colorPrimary));
this.button.setText("레드앱 버튼");
}
}

BaseMainActivity 를 상속받았으며, 부모의 button의 색상과 문구를 RedApp 답게 변경하였습니다.


 - redapp / res/ values / colors.xml 에서 테마색상도 빨간색으로 변경해줍시다.








10. 이제 redapp을 실행해보면 아래와같습니다. 





11. 이런 단순한 기능의 앱입니다. 이제부터 본격적으로 BlueApp 모듈을 추가하고, 같은 클래스파일을 가지고 같은 기능을 하면서도, 앱마다의 고유한 특징을 추가할 수 있도록 만들어보겠습니다.

  - 일단 현재 실행하는 앱이 어떤 앱인지, 그 앱의 특징은 무엇인지 저장할 프로퍼티를 가진 AppManager 클래스를 만들겠습니다. ( Singleton, Capsulize 따위 귀찮으니 생략... 쿨럭)


 - commonlibrary / AppManager.java

public class AppManager {

public enum AppType { RedApp, BlueApp }

public static AppType appType;
public static int themeColor;

}




12. 이제 BlueApp 모듈을 추가할것입니다. 메뉴 - File - New - New Module - Phone&Tablet Modue - 

앱 이름은 BlueApp 으로 입력합니다.


EmptyActivity 선택하고, BlueMainActivity 로 변경해서 입력해 줍니다. - Finish.






13. BlueApp의 build.gradle 파일의 dependencies 에  commonlibrary 를 추가해줍니다. (위 6번과정과 동일)

compile project(':commonlibrary')





14. BlueApp 의 manifests 에도 SecondActivity 를 등록해줍니다. (위 8번과정과 동일)



15. BlueMainActivity 와, RedMainActivity 을 재정의합니다. AppManager 에 현재 어떤 앱을 실행했는지, 테마색상은 무엇인지 이런것들을 저장해두겠습니다. BaseMainActivity 를 상속받고 있기 때문에, 공통된 기능을 사용할 수 있으며, 오버라이드하면서 그 앱의 특징만 재정의할 수 있겠습니다.


 - RedMainActivity.java

public class RedMainMainActivity extends BaseMainActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

AppManager.appType = AppManager.AppType.RedApp;
AppManager.themeColor = ContextCompat.getColor(this, R.color.colorPrimary);

this.button.setTextColor(AppManager.themeColor);
this.button.setText("레드앱 버튼");

this.textView.setText("이 앱은 레드앱입니다.");
}
}


 - BlueMainActivity.java

public class BlueMainActivity extends BaseMainActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

AppManager.appType = AppManager.AppType.BlueApp;
AppManager.themeColor = ContextCompat.getColor(this, R.color.colorPrimary);

this.button.setTextColor(AppManager.themeColor);
this.button.setText("블루앱 버튼");

this.textView.setText("블루앱을 실행했군요!!");
}
}






16. 버튼을 누르면 나오는 SecondActivity도 각 앱의 상황에 맞게 재정의 해봅니다.

public class SecondActivity extends AppCompatActivity {

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

TextView textView = (TextView) findViewById(R.id.textView);
Button button = (Button) findViewById(R.id.button);

//각 앱의 고유 테마색으로 변경.
textView.setTextColor(AppManager.themeColor);
button.setTextColor(AppManager.themeColor);

//앱 타입마다 분기.

if(AppManager.appType == AppManager.AppType.RedApp) {
textView.setText("레드앱에서 실행시킨 세컨액티비티");
}
else if(AppManager.appType == AppManager.AppType.BlueApp) {
textView.setText("블루앱에서 실행시킨 세컨액티비티");
}

button.setText("닫기");
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
}






17. 두 앱 모두 실행해봅니다. 상단에 앱 모듈을 선택할 수 있습니다.





18. RedApp 실행 모습.




20. BlueApp 실행 모습.



  이런식으로 모듈을 계속해서 추가해 나가면서, 공통된 리소스를 사용하면, 여러개의 비슷한 앱을 계속해서 만들어낼 수 있습니다. 물론 이것은 정말 심플한 예제이고, 실제 Product 를 개발 할 때는, 훨씬 더 많은 고민을 해야할 것입니다. 저는 테마나 색상같은 Resource 관리가 좀 많이 귀찮았습니다. ㅠㅠ 



Full 예제 소스 - https://github.com/vowed21/MultiModuleExample_Andorid




















Comments