# FortyTwo

**Repository Path**: chinasoft5_ohos/FortyTwo

## Basic Information

- **Project Name**: FortyTwo
- **Description**: 显示多项选择答案的UI库
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-17
- **Last Updated**: 2021-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FortyTwo


#### 项目介绍
- 项目名称：FortyTwo
- 所属系列：openharmony的第三方组件适配移植
- 功能：显示多项选择答案的UI库
- 项目移植状态：主功能完成
- 调用差异：无
- 开发版本：sdk6，DevEco Studio 2.2 Beta1
- 基线版本：Release 1.0.0

#### 效果演示
![效果图](https://gitee.com/chinasoft5_ohos/FortyTwo/raw/master/artwork/single_selection.gif)

#### 安装教程

1.在项目根目录下的build.gradle文件中，
 ```gradle
allprojects {
    repositories {
        maven {
            url 'https://s01.oss.sonatype.org/content/repositories/releases/'
        }
    }
}
 ```
2.在entry模块的build.gradle文件中，
 ```gradle
 dependencies {
    implementation('com.gitee.chinasoft_ohos:FortyTwo:1.0.0')
    ......  
 }
 ```

#### 使用说明

There are three key interfaces in this library:
- Answer: Contains the actual data to display.
- AnswerGroup: Displays multiple AnswerViews and coordinates the user’s interaction with them.
- AnswerView: Displays a single answer in the UI along with an identifier (e.g A, B, C, 1, 2, 3 etc.)

This section provides a quick overview of the components. For more in depth information, read the Javadoc and have a look at [the example](entry/src/main/java/com/matthewtamlin/fortytwo).

###### Answer
Define your answers by implementing the Answer interface or instantating one of the provided implementations.
```java
// Directly implement the interface
Answer answer1 = new Answer() {
  public CharSequence getText() {
    return "incorrect answer";
  }
    
  public boolean isCorrect() {
    return false;
  };
}
    
// Use the PojoAnswer class
Answer answer2 = new PojoAnswer("this is the right answer", true);
answer2.setText("actually I changed my mind, this answer is wrong too");
answer2.setCorrectness(false);

// Use the ImmutableAnswer class
Answer answer3 = new ImmutableAnswer("this is definitely the right answer", true);
```

###### AnswerGroup
Display and coordinate multiple answers by adding an AnswerGroup to your layout. The SelectionLimitAnswerGroup is the only provided answer group and it should be flexible enough to meet most needs.

Using XML:
```xml
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#FF212121"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:main_Activity_question_container"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:multiple_lines="true"
        ohos:padding="8vp"
        ohos:text_alignment="center"
        ohos:text_color="#ffffff"
        ohos:text_size="20fp" />

    <com.matthewtamlin.fortytwo.library.answer_group.SelectionLimitedAnswerGroup
        ohos:id="$+id:main_activity_answer_group"
        ohos:height="match_content"
        ohos:width="match_parent" />

    <Button
        ohos:id="$+id:main_activity_action_button"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:btn_bg"
        ohos:layout_alignment="horizontal_center"
        ohos:padding="6vp"
        ohos:text="SUBMIT"
        ohos:text_color="#ffffff"
        ohos:text_size="16fp"
        ohos:text_weight="500"
        ohos:top_margin="5vp" />

</DirectionalLayout>
```

Programatically:
```java
// Like all views, a Context is needed to instantiate
AnswerGroup group = new SelectionLimitAnswerGroup(context);

// Ignore user input when the answers are showing as marked
group.allowSelectionChangesWhenMarked(false);

// Allow at most two answers to be selected at a time
group.setMultipleSelectionLimit(2);

// Enable animations when the user interacts with the view
group.enableSelectionAnimations(true);
```

###### AnswerView
Create an AnswerView for each Answer and add them to the AnswerGroup. The DecoratedAnswerCard is the recommended class due to its versatility and customisability.
```java
List<Answers> answers = getAnswers();

for (int i = 0; i < answers.size(); i++) {
  // Like all views, a Context is needed to instantiate
  DecoratedAnswerCard answerCard = new DecoratedAnswerCard(context);

  // False = don't show animations
  answerCard.setAnswer(answers.get(i), false);
	
  // Identify each answer with a sequential number (e.g. 1. Some answer, 2. Another answer)
  answerCard.setIdentifier((i + 1) + ".", false); 
		
  // Customise the answer card using decorators (see below for details)
  answerCard.addDecorator(createColorFadeDecorator(), false);
  answerCard.addDecorator(createAlphaDecorator(), false);
	
  // Show the card in the UI
  getAnswerGroup().addAnswer(decoratedAnswerCard);
}
```

Two concrete decorator classes are provided: ColorFadeDecorator and AlphaDecorator.
```java
// Changes the background color of the card, using a blended color transition
public ColorFadeDecorator createColorFadeDecorator() {
  // Defines the colors to use for different answer properties
  final ColorSupplier colorSupplier = new ColorSupplier() {
    @Override
    public int getColor(boolean marked, boolean selected, boolean answerIsCorrect) {
      if (marked) {
        if (selected) {
          return answerIsCorrect ? Color.GREEN : Color.RED;
        } else {
          return answerIsCorrect ? Color.PURPLE : Color.WHITE;
        }
      } else {
        return selected ? Color.ORANGE : Color.WHITE;
      }
    }
  };

  return new ColorFadeDecorator(colorSupplier);
}

// Changes the alpha of the card
public AlphaDecorator createAlphaDecorator() {
  // Defines the alpha values to use for different answer properties
  final AlphaSupplier alphaSupplier = new AlphaSupplier() {
    @Override
    public float getAlpha(boolean marked, boolean selected, boolean answerIsCorrect) {
      if (marked && !selected && !answerIsCorrect) {
        return 0.3f; // 30% opacity
      } else {
        return 1f; // Full opacity
      }
    }
  };

  return new AlphaDecorator(alphaSupplier);
}
```
To create your own decorator, you can:
- Extend one of the existing decorators
- Extend the DecoratorAdapter class (eliminates boilerplate code)
- Implement the Decorator interface directly

#### 测试信息

CodeCheck代码测试无异常

CloudTest代码测试无异常

病毒安全检测通过

当前版本demo功能与原组件基本无差异


#### 版本迭代

- 1.0.0

#### 版权和许可信息
[Apache License, Version 2.0](LICENSE)